熟练掌握以下内容，jquery 你已经会使用一大半了，当然其中原理当我们慢慢深入自会心领神会，融会贯通。
一. 选择器
1. $("#div1") => 根据元素的id属性值来查找节点(id选择器)
2. $(".div1") => 根据元素的class属性值来查找节点(class选择器)
3. $(".div1, p") => 将每一个选择器匹配到的元素合并后一起返回(群组选择器)
4. $(".div1 ul li") => 查找祖先元素下匹配所有的后代元素(结构选择器)
5. $(".div1 > ul > li") => 查找给定的父元素下匹配所有的子元素(结构选择器)
6. $(".div1 ul li:eq(1)") => 查找一个给定索引值的元素(索引值是从0开始)
7. $('input[name="user"]') => 根据元素的属性来查找元素
8. $(".div1:visible") => 查找所有的可见元素
9. $("input:checked") => 选中的表单控件
10. $("select option:selected") => 匹配所有选中的option元素
二. 筛选
1. $("div").eq(1) => 获取第N个元素(从0开始)
2. $("li").first() => 获取第一个元素
3. $("li").last() => 获取最后一个元素
4. $(".div1").hasClass("selected") => 判断元素是否有指定的类 有返回true或false
5. $(".div1").children() => 返回所有的子元素，参数可以是一个选择器，会对子元素进行筛选
6. $(".div1").find("span") => 获取.div1节点下的所有的span元素(后代元素)
7. $(".div1").next() => 获取下一个兄弟节点
8. $(".div1").nextAll() => 获取下边所有的兄弟节点
9. $(".div1").prev() => 获取上一个兄弟节点
10. $(".div1").prevAll() => 获取上边所有的兄弟节点
11. $(".div1").siblings() => 获取.div1元素所有的兄弟节点
12. $(".div1").parent() => 查找.div1元素的父节点
13. $(".div1").parents("选择器") => 返回指定的祖先元素
14. $(".div1").find("p").end() => 将匹配的元素列表变为上一次的状态
三. CSS
1. $(".div1").css({...}) => 设置元素css样式，同时设置多个
2. $(".div1").width() => 获取元素内容的宽度(不包含padding和border)，传参数表示设置
3. $(".div1").innerWidth() => 获取元素可视区的宽度(不包含border)，传参数表示设置
4. $(".div1").outerWidth() => 获取元素盒模型的宽度，传参数表示设置
5. $(".div1").height()
6. $(".div1").innerHeight()
7. $(".div1").outerHeight()
8. $(".div1").offset().left/top => 获取匹配元素在当前视口的相对偏移
9. $("html, body").scrollTop() => 获取页面卷过去的距离，传参表示设置
四. 事件
1. $(".div1").on("事件类型", 事件处理函数) => 表示元素的事件绑定，事件类型没有on
2. $(".div1").off("事件类型") => 表示元素事件的解绑
3. $(".div1").on("事件类型", "选择器", 事件处理函数) => 表示事件的委派，选择器所选择的元素是真正产生事件的元素
五. 属性操作
1. $(".div1").attr() => 属性操作，一个参数表示查找属性，两个参数表示设置属性，如果想同时设置多个属性，传json对象
2. $(".div1").removeAttr() => 表示移除一个属性，参数是属性名
3. $(".div1").addClass("selected") => 表示追加class属性
4. $(".div1").removeClass("selected") => 表示移除一个class属性
5. $(".div1").html() => 设置或获取节点的html文本，不传参数表示获取，传参表示设置
6. $("input").val() => 设置或获取表单元素的值，不传参数表示获取，传参表示设置
7. $("input[type='checkbox']").prop("checked") => 获取表单元素的选中状态，返回 true/false
六. 文档处理
1. $(".div1").append() => 节点的追加，参数节点作为子元素追加到目标节点后边，参数可以是字符串也可以是节点对象
2. $(".div1").after() => 在匹配的元素之后插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
3. $(".div1").before() => 在匹配的元素之前插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
4. $(".div1").remove() => 表示节点的移除
5. $(".div1").clone() => 表示节点的克隆/复制 包含后代元素元素 参数默认是false 如果参数是true表是事件也会被克隆
七. 核心
1. each 方法 => jQuery对象.each(function(){}) => 表示节点的遍历
2. index 方法 => jQuery对象.index() => 获取当前节点在节点列表中的索引值
3. length 属性 => 获取JQ对象中节点的个数
4. $(".div1").get(0) => 获取JQ对象中一个匹配的元素，返回原生js对象，等价于$(".div1")[0]
八. ajax
$.ajax({
type : "POST", //提交方式
url : "",//路径
data : {
//提交的参数
},//数据，这里使用的是Json格式进行传输
success : function(result) {//返回数据根据结果进行相应的处理
if ( result.success ) {
这里写成功的数据处理
} else {
这里写错误的数据处理
}
}
});
post 方法
$.post( "",//路径
{
//提交的参数
},//数据，这里使用的是Json格式进行传输
function(result) {//返回数据根据结果进行相应的处理
if ( result.success ) {
这里写成功的数据处理
} else {
这里写错误的数据处理
}
}
);
get 方法
$.get( "",//路径
{
//提交的参数
},//数据，这里使用的是Json格式进行传输
function(result) {//返回数据根据结果进行相应的处理
if ( result.success ) {
这里写成功的数据处理
} else {
这里写错误的数据处理
}
}
);
九. 动画
1. $(".div1").show() => 显示元素
2. $(".div1").hide() => 隐藏元素
3. $(".div1").fadeIn() => 淡入动画
4. $(".div1").fadeout() => 淡出动画
5. $(".div1").slideUp() => 收起的动画
6. $(".div1").slideDown() => 展开的动画
7. $(".div1").animate() => 自定义动画 参数：1. 样式的json对象 2. 动画持续时间 3. 回调函数
8. stop => jQuery 的stop方法是用来清空动画序列
十. 工具方法
1. $.trim(str) => 过滤字符串首位空格
2. $.isArray(arr) => 判断参数是否是数据
3. $.inArray("John", arr) => 查找第一个参数在数组中的位置(如果没有找到则返回 -1 )
4. $.proxy() => $.proxy(方法名, 新的引用)(方法的参数列表) 改变方法中的this指向
网友评论