标签：
一. jQuery简单介绍
1. 概念: jQuery框架是在原生js的基础上,对js进行半封装的产物
2. 作用: jQuery框架几乎涵盖了前端中所有的应用,所以它应用的
范围是很广的
3. 作用: 使用简单,解决了许多兼容性问题;
文件比较小,压缩过后不超过100kB;
二. jQuery的版本分两派
1. 1.xx 的版本: 这个派的版本是兼容IE6,IE7,IE8及现代浏览器,
比起2.xx版本肯定文件会更大.
2. 2.xx 的版本: 这个派的版本是不兼容IE浏览器的,只针对现代
浏览器;显然2.xx比1.xx版本的jQuery的效率更高.
三. 导入框架js文件
1. 编译后的jQuery文件的大小会更小,所以我们在导入的时候应导入编译后的
2. 没有编译的jQuery文件中的编码是规范的编码格式,供用户查看源码
四. jQuery对象
1. 获取到jQuery对象: jQuery("选择器"),可以简写为 $("选择器");
如: <div class="mydiv"></div>
获取到class = "mydiv"的jQuery对象 ----- $(".mydiv");
<div id="div1"></div>
获取到id = "div1"的jQuery对象 ----- $("#div1")
注意: 获取都的jQuery对象后,那么这个对象就不是js对象了,所以不能让
jQuery对象调用js方法;同理,js对象也不能调用jQuery方法;
2. 获取到创建好的变量的jQuery对象
var div1 = document.getElementById("div1");
获取到变量为div1的jQuery对象: $(div1); 注意这里就不能
加双引号了.
3. 不管是通过id获取到的jQuery对象,还是通过类获取到的jQuery对象,
都是以数组的形式存放的,所以jQuery对象就是一个数组,它有length
属性和size方法,length属性是获取到jQuery对象的个数,size方法
也是获取到jQuery对象的个数,但length是属性,size()是方法.
五. jQuery的选择器
1. $("ul li: first") 获取到ul下的第一个li
2. $("ul li: last") 获取到ul下的最后一个li
3. $("ul li: even") 获取到ul下的位置为奇数的li
4. $("ul li: odd") 获取到ul下的位置为偶数的li
5. $("ul li: eq(3)") 获取到ul下的索引值为3的li
5. $("ul li: lt(3)") 获取到ul下的索引值比3小的li
5. $("ul li: gt(4)") 获取到ul下的索引值比4大的li
6. $(":header") 获取到页面上的所有标题标签(h1-h6)
6. $("#div1 + label") 获取到div1的下一个兄弟元素
六. jQuery的方法(获取到jQuery对象,用"."的方式来调用jQuery的各种方法)
1. 获取或设置元素内容的方法
$("#username").val() 获取到input输入框的value值
$("#username").val("Tom") 设置input输入框的值为"Tom"
$("#div1").text() 获取元素中的内容
$("#div1").text("hello") 设置元素中的内容为"hello"
$("#div1").html() 获取元素中的内容
$("#div1").html("hello") 设置元素中的内容为"hello"
注意: 1. val()方法只能用于表单的输入框;
2. text()方法会原封不动的获取或设置元素的内容,当内容
中又标签时,它不会识别标签,而是直接把标签也当成文本内容;
html()方法跟text()都是用于设置元素的内容的,只是html()
会识别文本中的元素标签;
举例: $("#div1").text("<p>你好</p>");
div中的内容展示为一串文字:
<div id="div1">
"<p>你好</p>"
</div>
$("#div1").text("<p>你好</p>");
div中的内容展示为p标签中的文字是"你好":
<div id="div1">
<p>你好</p>
</div>
2. 给元素添加属性
1. 只添加一个属性
$("p").attr("name","myp") 给p元素添加属性name="myp"
2. 利用json对象的键值对,给一个元素添加多个属性
$("p").attr({
name: "myp",
class: "class_p",
di: "id_p"
})
给p元素添加了属性name="myp",class="class_p",id="id_p.
另一种方式:
$("p").addClass("myp") 给p元素添加了属性class="myp"
$("p").removeClass("myp") 取消p元素class="myp"的属性
注意: 若直接调用 $("p").removeClass(),那么火删除p元素的
所有class属性;如有时候一个元素有两个或三个class属性,那么
直接调用removeClass方法就会把这些class属性都删除.
3. 切换元素的(设置class属性)与(取消class属性)的方法
$("p").toggleClass("myp");
如果p元素存在class="myp"的属性,那么toggleClass就会取消这个class属性;
如果p元素不存在class="myp"的属性,那么toggleClass就会为p元素添加这个class属性;
4. prop()方法跟attr()方法都是给元素添加属性,但attr()不能处理有特殊作用的属性,
而prop就可以处理:
如checked.selected等属性,使用prop就可以有效的为元素添加被选中的属性
$("input").prop("checked",true)
5. css()是设置css样式的方法
1. 设置一个属性的值
$("p").css("color","red") 设置p元素中的字体的颜色为red
2. 利用json对象的键值对,设置多个属性的值
$("p").css({
color: "red",
font-size: "12px",
border: "1px solid red"
"})
5. 获取到元素的下一个兄弟元素: $("p").next();
6. 获取到元素的上一个兄弟元素: $("p").pre();
七. 1. $("p").eq(index) 获取到jQuery对象中对应索引值的对象
如: $("p").eq(4) 获取到p元素(这是一个数组)中索引值为4的p元素
2. $("p").get(2) 获取到p元素中索引值为2的p元素
3. $("p").index(对象) 获取到p元素中对应括号中的对象的索引值
如$("p").index(document.getElementById("p1")); 就表示获取到
p元素中id="p1"的元素在 $("p")对象中的索引值
八. 节点方法
1. $("div").append("<p>添加节点</p>");
这表示在div容器中的最后添加p元素节点---"<p>添加节点"</p>
2. $("p").appendTo("div");
表示把p元素添加到div容器中的最后;换一种说法也就是表示在
div容器中的最后添加p元素节点---"<p>添加节点"</p>
append()与appendTo()的方法都是在元素的最后添加节点,
执行的效果都一样,只是在编码时添加与被添加元素的位置相反
3. $("body").prepend("<p>添加节点</p>");
表示在body容器中的最前面添加p元素节点----"<p>添加节点"</p>
4. 清空节点和删除节点
1. $("p").empty(); 表示清空p元素中的内容,但p标签这个元素仍然存在
2. $("p").remove(); 表示把p标签的这个元素删除
所以: empty()是删除标签中的内容; 而remove()是删除标签
5. 添加兄弟节点
1. $("p").before("<div>Hello</div>");
表示在p元素的前面添加一个兄弟节点为<div>Hello</div>
2. $("p").after("<h1>Hello</h1>");
表示在p元素的后面添加一个兄弟节点为<h1>Hello</h1>
标签：
原文地址：http://www.cnblogs.com/Hrbacity/p/4966183.html
