黑马程序员_学习日记62_709jQuery1（map()和each()、选择器、节点遍历、设置样式）

Jquery1
一、简介
JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别
JavaScript的封装库：Prototype、Dojo、ExtJS、Jquery
链式编程、隐式迭代、屏蔽浏览器差异跨浏览器兼容性好

二、学什么？
选择器、常用的方法、Jquery插件

三、ready()
（一）用法：

$(document).ready(fucntion(){
    alert(“hello world”);
})

可简写为：

$(function(){
    alert(“hello world”);
})

（二）ready()与onload()的区别：
1、ready()可触发多次，onload()只可触发一次。
2、ready()在onload()之前触发：ready()在Dom元素加载完后触发，onload()在Dom、css等都加载完后触发。

四、Jquery对象、Dom对象
1、Jquery对象举例：

$(function(){
    var $div = $(“#d1”);
    $div.html(“abc”);
})

注意：Dom对象不能使用Jquery对象的方法或属性，Jquery对象也不能使用Dom对象的方法和属性。
2、把Dom对象转化为Jquery对象：
var $div = $(div);
把Jquery对象转换为Dom对象：
var div =$div[0];
包装集：Dom对象包装起来的集合。
注意：Array是js的对象，不是Dom对象，所以不用转换为Jquery对象。

五、两个静态方法
（一）$.map 将一个数组中的所有项转换为另一个数组

var arr = [100,200,300,400];
arr = $.map(arr,function(item){
    return item+2;
})

map方法的源代码：

map:function(elems,callback,arg){
     var ret = [],value;
     //Go through the array,translating each of the items to their new value(or values).
     for(var i=0,length = elems.length;i<length;i++){
         value = callback(elems[i],I,arg);
         if(value != null){
             ret[ret.length] = value;
        }
    }
    return ret.concat.apply([],ret);
}

（二）$.each

var dic = {“name”:”zs”,”age”:18,”sex”:”男”};
$.each(dic,function(key,value){
   alert(key+”:”+value);
})

each方法中this是dic的value，因为其中的call方法改变了this的指向。例：

//改变this
function test(){
    alert(this);
}
var a = “abc”;
//call可以改变this，call方法的第一个参数就是this的指向
test.call(a);

六、Jquery选择器
（一）id选择器
$(function(){
    $(“#d1”).text(“123”);
})
（二）类选择器
$(“.cls”).text(“abc”);
（三）标签选择器
$(“div”).text(“xyz”); //隐式迭代
（四）复合选择器
$(“#d1,.cls,p”).text(“aaaa”);
（五）层次选择器
1、父子级关系：

//wrap中所有p，包含子元素p、子子元素p
$(“#wrap p”).css(“background-color”,”red”);
//直接子元素
$(“#wrap > p”).css(“background-color”,”red”);

2、同级关系：

//之后紧邻的第一个div
$(“#wrap + div“).css(“background-color”,”red”);
//之后所有的同级div
$(“wrap ~ div”).css(“background-color”,”red”);

（六）简单选择器
:first 选取第一个元素。例：$(“div:first”) 选取第一个<div>
:last 选取最后一个元素。
:not(选择器) 选取不满足“选择器”条件的元素。例:$(“input:not(.myClass)”) 选取样式名不是myClass的<input>
:odd、:even选取索引是奇数、偶数的元素。例 $(“input:even”)选取索引是偶数的<input>
:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引、等于、大于、小于索引序号的元素。例：$(“input:lt(5)”)选取索引小于5的<input>
（七）相对定位
 不仅可以使用选择器进行绝对定位，还可以进行相对定位。只要在$()指定第二个参数，第二个参数为相对元素。例 $(“ul”,$(this)).css(“background”,”red”);

七、Jquery对象的方法
（一）封装Dom属性的方法：
jQuery修改样式：$(“#div1”).css(“background”,”red”);
获得样式：$(“#div1”).css(“background”);
修改value：$(“#un”).val(“abc”);
获取value：$(“#un”).val();
 
类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。
（二）判断对象是否存在：
 Jquery选择器返回的是一个对象数组（数组中每个对象还是Dom对象），调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if($(“#btn1”).length<=0){
    alert(“id为btn1的元素不存在!”);
}

（三）attr()方法设置或获取Jquery没有封装的属性
alert($(“#btn1”).attr(“href”));
$(“#btn1”).attr(“href”,”http://www.rupeng.com”);
attr设置控件样式：（对比css方法）
$(“#link”).css(“color”,”red”);
$(“#link”).attr(“style”,”color:red”);
css()方法的参数可以用json表示：
$(“#link”).css({“color”:”red”,”background-color”:”blue”});
（四）节点遍历
next()方法用于获取节点之后的挨着的第一个同辈元素
nextAll()方法用于获取节点之后的所有同辈元素
//之后所有的p标签
$(“#d4”).nextAll(“p”).css(“background-color”,”red”);
prev、prevAll 获取节点之前的同级元素
siblings()方法用于获取所有同辈元素
$(this).css(“background-color”,”red”).siblings().css(“background-color”,”gray”)
end() 将匹配的元素列表变为前一次的状态
//例：将当前节点和之后的同级节点背景色都改为红色
$(“#d4”).nextAll().css(“background-color”,”red”).end().css(“background-color”,”red”);
andself() 将匹配的元素列表加上自己
$(“#d4”).nextAll().andSelf().css(“background-color”,”red”);
综合运用：（评分控件）

$(function () {
    $("#rating li").mouseover(function () {
        $(this).prevAll().andSelf().html("★");
        $(this).nextAll().html("☆");
    })
})

八、设置样式
css() 设置行内样式，设置标签的style属性
attr(“class”,”c1”) 对class属性赋值，设置标签的所有属性

addClass(“myclass”) （不影响其他样式）class=”c1 c2”
removeClass(“myclass”) 移除样式
toggleClass(“myclass”) 如果存在样式则去掉样式，如果没有样式则添加样式
hasClass(“myclass”) 判断是否存在样式