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是隐式的

总结一下：

1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如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对象