首页 > 代码库 > jquery基础知识1
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=http://www.mamicode.com/img/profileIcon1038.jpg>‘);
jquery部分方法
1.css()
2.
val() ----value();表单元素内容
html() ----innerHTMl();//文本加元素
text() ----innerText();//纯文本
jquery基础知识1