jquery基础知识1

jquery 的 $.each,$.trim,$.map三种基本方法

1.$.each()

作用 :相当于for 对数组元素进行遍历也可以对json对象,键值对对象遍历通过回调函数实现

var arrInt=[1,2,3,4,5];
$.each(arrInt,function(key,value){
if(key==2)
return false;//相当于break;

alert(key+" "+value);
});
// var p={'name':'zhangsan','sex':'男','email':'2312@qq.com'};
// $.each(p,function(key,value){
// alert(key+" "+value);
// });

2.$.trim()

作用:去掉字符串首尾空白字符

var str=" qwe "
alert($.trim(str));

3.$.map()

作用:对数组进行操作

var arrInt=[10,33,44,55,66];
// arrInt=$.map(arrInt,function(element,index){
// return element*2;
// });
// alert(arrInt);
// arrInt=$.map(arrInt,function(element,index){
// if(index>3)
// return element*2;
// else return element;
// });
// alert(arrInt);

4.dom对象和jquery对象

// dom-->jquery $(dom)
//jquery-->dom jqueryObject.get(0) or jqueryObject[0]
// 问题:为什么要把dom对象转化为jquery对象
// 解决部分浏览器的兼容性问题

var divObj=document.getElementById('div1');
divObj.innerHTML="Hello world";
// dom-->jquery
$dvObj=$(divObj);
$dvObj.html("你好世界");

//jquery-->dom
var domDiv=$dvObj[0];
domDiv.innerHTML="1232456qweqwrqwr";

document.getElementById('btn').onclick=function(){
var $txt=$(document.getElementById('txt'));
alert($txt.val());
////通过jquery 的css方法设置css样式
// $txt.css('border','1px solid blue');
// $txt.css('float','right');

$txt.css({
border:'2px solid black',
'color':'red',
float:'right',
fontSize:'20px',
backgroundColor:'pink',
/////区别关键字和字符串
});
$link=$(document.getElementById('link'));
// $link.html('wowowowoow');
$link.html('<img src=img/profileIcon1038.jpg>');

jquery部分方法

1.css()

val() ----value();表单元素内容
html() ----innerHTMl();//文本加元素
text() ----innerText();//纯文本