一. jQuery概述
a. jQuery本身就是一个js文件,是一个javascript函数库
b. jQuery可以像css选择器一样选择页面中的元素
c. 可以创建HTML元素,将js对象转换为jQuery对象
d. 便捷的文档就绪事件书写
二. 对象转换、文档就绪
a. js对象转换为jQuery对象
i. $(function(){
var div = document.getElementByld("test");
$(div).text("这一句是jQuery对象");
});
b. jQuery对象转换为js对象
i. $(function{
var div = $("#test").get[0];
div.innerText = "abcd";
});
c. 文档就绪事件的写法
i. window.onload=function(){
}
ii. $(document).ready(function(){
});
iii. $().ready(function(){
});
iv. $(function(){
});
三. jQuery选择器
a. 基本选择器
i. 元素名选择器---$("div")
ii. class(类)选择器---$(".c")
iii. id选择器---$("#d")
iv. *号匹配符---$("*")匹配所有的元素
v. 多元素选择器---$("div,span,#d,.c")
b. 层级选择器--通过DOM元素之间的层次关系来获取特定元素
i. $("div span") – 匹配div下所有的span兄弟元素
ii. $("div>span") – 匹配div下所有的span子元素
iii. $("div+span") – 匹配div后面紧邻的span兄弟元素
iv. $("div~span") – 匹配div后面所有的span兄弟元素
c. 基本过滤选择器--通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 ":" 开头
i. $("div:first") – 匹配所有div中的第一个div元素
ii. $("div:even") – 匹配所有div中索引值为偶数的div元素,0开始
iii. $("div:odd") – 匹配所有div中索引值为奇数的div元素,0开始
iv. $("div:eq(n)") – 匹配所有div中索引值为n的div元素,0开始
v. $("div:lt(n)") – 匹配所有div中索引值小于n的div元素,0开始
vi. $("div:gt(n)") – 匹配所有div中索引值大于n的div元素,0开始
vii. $("div:not(.one)") – 匹配所有class值不为one的div元素
d. 内容选择器
i. $("div:contains('abc')") – 匹配所有div中包含abc内容的div元素
ii. $("div:has(p)") – 匹配所有包含p元素的div元素
iii. $("div:empty") – 匹配所有内容为空的div元素
iv. $("div:parent") – 匹配所有内容不为空的div元素
e. 可见选择器
i. $("div:hidden") – 匹配所有隐藏的div元素
ii. $("div:visible") – 匹配所有可见的div元素
f. 属性选择器
i. $("div[id]") – 匹配所有具有id属性的div元素
ii. $("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
iii. $("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
iv. $("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素
g. 表单选择器
i. $(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button
ii. $(":password") – 匹配所有的密码框
iii. $(":radio") – 匹配所有的单选框
iv. $(":checkbox") – 匹配所有的复选框
v. $(":checked") – 匹配所有的被选中的单选框/复选框/option
vi. $("input:checked") – 匹配所有的被选中的单选框/复选框
vii. $(":selected") – 匹配所有被选中的option选项
四. jQuery文档操作
a. 文档操作
i. parent()
b. 事件
i. click()
ii. blur()
iii. focus()
iv. change()
v. ready()
c. 效果
待完善……