jQuery对象增删改,事件,操作,.data函数,.each函数
1 jQuery 两种创建节点的方法
1 使用
,类似这样的方法。
2 确定导入jQuery后
效果：
2 jQuery改动DOM节点的多种方法：
添加次级节点：
$(A).append(B)// 把B追加到A的次级目录得最后面 $(A).appendTo(B)// 把A追加到B的次级目录得最后面
$(A).prepend(B)// 把B前置到A的次级目录得最后面
$(A).prependTo(B)// 把A前置到B的次级目录得最后面
添加同级节点：
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素，包括本节点。 empty()// 删除匹配的元素集合中所有的子节点。
替换节点：
$A.replaceWith($B) //A替换B $BreplaceAll(￥A) //B替换A
$A.clone(); // clone方法不加参数true，克隆标签但不克隆标签带的事件 $A.clone(true); //clone方法加参数true，克隆标签并且克隆标签带的事件
3 事件 event；
常用事件：
常用事件
click(function(){...}) //单击事件
hover(function(){...},function(){...}) //第一个函数鼠标移上去时执行，第二个函数鼠标移开执行
blur(function(){...}) //失去焦点
focus(function(){...}) //获取聚焦
change(function(){...}) //值改变
keyup(function(){...}) //某个键由按下变化到平时状态
keydown(function(){...}) //某个键被按下
keyup(),keydown() keydown，keyon会得到一个keyCode值,按下不同键，值是不同的。
事件绑定
事件可以由上面的事件函数绑定，也可以由on() 函数绑定。
.on( events [, selector ],function(){})：events参数数据类型为字符串，一般是上面事件函数的字符部分如
"click"，"keyon"，"keydown"，"change"。
具体事件列表 http://www.w3school.com.cn/jquery/jquery_ref_events.asp
function(){},事件发生时的函数，注意 如果此时函数内部引用this，那么是一个DOM节点，而不是jQuery对象.
[, selector ] 可选参数，如果有参数 数据类型为字符串，配合使用本函数的对象使用，
比如：$("body").on("event","input:checkedbox",function(){''.......}) 那么触发事件的对象，就是$('body input:checkedbox')对象
事件移除
.off( events [, selector ][,function(){}])（用法同上）
阻止后续事件执行
1 return false； 2 this.preventDefault()
注意：hover 不能直接在on函数里面使用，参考以下代码
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
4 页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
$(document).ready(function(){
// 在这里写你的JS代码...
})
或
$(function(){
// 你在这里写你的代码
})
5 .data函数 .each函数
在匹配的元素集合中的所有元素上存储任意数据 ，返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value): 在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.removeData(key):
jQuery.each(collection, callback(indexInArray, valueOfElement))：
通用迭代函数，用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，
从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//i是索引，v是每次循环的具体元素。
})
输出：
010
120
230
340
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。
由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
中止.each操作： return false （相当于break） 跳过循环：return （相当于 continue）
注意: jQuery的方法返回一个jQuery对象，遍历jQuery对象中的元素 - 被称为隐式迭代的过程。
当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
r=[{'name':'小李','性别':'男'},{'name':'小王','性别':'不男不女'}]
$.each(r,function(index,value){
console.log(index,value)
})
0 {name: "小李", 性别: "男"}
1 {name: "小王", 性别: "不男不女"}
6 jQuery如何操作标签属性,className值
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
prop() // 获取属性 removeProp() // 移除属性
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
实例：
<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
样式操作：
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
直接操作属性节点的值：
css("color","red")//DOM操作：tag.style.color="red"
如
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
尺寸
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
文本操作
html()// 取得第一个匹配元素的html代码
html(val)// 设置所有匹配元素的html代码
text()// 取得所有匹配元素的文本内容
text(val)// 设置所有匹配元素的文本内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
实例：
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
获取被选中的checkbox或radio的值：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
$("input[name='gender']:checked").val()
为了方便，不要随意把jQurey对象变成Dom对象
