一、jquery概述
jquery是javascript库,简化了js编程,其中包含了
1.对html元素的选取和操作
2.对css样式进行操作
3.html事件函数
4.js特效和动画
5.DOM对象的遍历和修改
6.ajax
7.Utilties工具
安装以及引用
1.1.本地文件:创建js目录,将jquery文件放置到该目录
jquery文件有两种:
1.开发版:适合学习和开发使用,格式是按照原有的js代码进行格式化,体积较大
2.发布版:适合项目的上线和使用,格式是被压缩过的,体积较小
2.通过script标签,src属性表示jquery文件的相对路径,注意引入标签中不能再进行编码
jquery语法
$(select).action()
其中$表示定义jquery,selector表示选择器,用于选取或查找html元素,action()表示jquery对元素进行操作
举例:$("#div-1").hide()选取id属性为div-1的html元素进行隐藏
jquery目标就是,write less do more(写的少做的多)
文档就绪事件
起因:js代码在进行元素选择时有可能由于页面(文档)还未加载完成而导致元素选取不当,导致报错,文档就绪事件:在整个页面(文档)完全加载后在触发的事件
$(document).ready(function(){
jquery代码
})
//精简写法
$(funtion(){
jquery代码
})
jquery选择器
1.#id选择器
// $("#id属性").action()
// click(function(){})点击事件,function是点击后执行的1方法
$("#btn1").click(function(){
$("#p2").hide();
})
2..class选择器
$(".class属性").action()
$("#btn2").click(function(){
$(".pp").css("font-size","72px")
})
3.元素选择器
基于元素名选取
例如选取所有p元素$("p").action()
$("#btn1").click(function(){
$("p").css("color","red")
})
4.枚举选择器(组合选择器)
利用","将多个选择器进行分隔,使满足所有选择器的元素进行选取
例如,选取所有的p元素,所有的class属性为div的元素$("p,.div").action()
$("#btn2").click(function(){
$("p,.div").css("background-color","yellow")
})
5.子元素选择器,后代选择器
子元素选择器:只选取子元素$("#id>.classname")选取id属性为id元素的所有ckass属性 为classname的后一代元素
6. 后代选择器:选取所有后代元素
$("#id .classname")选取id属性为id元素的所有后代中class属性为classname的元素
$("#btn3").click(function(){
$(".div-1>h2").hide()
})
$("#btn4").click(function(){
$(".div-1 h2").hide()
})
7.紧邻下一个元素选择器
$("#id+.classname")
选取id属性为id的下一个class属性为classname的元素
注意:如果身后第一个元素类型不是+后选择区选取的类型,那么无法选中
8.兄弟元素选择器
$("#id~.classname")
选取id属性为id所有身后的兄弟中class属性为classname的元素
$("#btn5").click(function(){
$("#h1+p").hide()
})
$("#btn6").click(function(){
$("h1~p").hide()
})
9.元素属性过滤选择器
含义属性: $("a[href]"): 选取超连接标签中href属性的元素
属性值等于 $(a[href='www.badu.com']) 选取超链接标签中href属性为a1的元素
$("#btn7").click(function(){
$("a[href]").css("text-decoration","none")
})
$("#btn8").click(function(){
$("a[id='a1']").css("text-decoration","none")
})
10.过滤选择器
使用:后跟一些过滤条件,将满足条件的元素进行选取
$("li:first")选取列表项中的第一个
$("li:last")选取列表项中的最后一个
$("li:even")选取下标为偶数的li
$("li:odd")选取下标为奇数的li
$("li:eq(4)")选取下标等于4的li
$("li:gt(2)")选取下标大于2的li
$("li:lt(2)")选取下标小于2的li
$("li:not(#id)")剔除id=id以外的所有li
$("#btn9").click(function(){
$("li:first").css("font-size","30px")
})
$("#btn10").click(function(){
$("li:even").css("font-size","30px")
})
$("#btn11").click(function(){
$("li:eq(4)").css("font-size","30px")
})
$("#btn12").click(function(){
$("li:not(#li3)").css("font-size","30px")
})
11.状态选择器
$("input:checked")选取被选中的input标签
$("input:disabled")选取不可用的input
$("option:selected")选取被选择的菜单