目录
流行的JavaScript类库
为了简化JavaScript的开发,一些JavsScript库就诞生了。JavaScript,库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。
jQuery特点
- 轻量级:封装后的库只有不到100k,下载的时候很快
- 强大选择器:方便快速查找DOM元素
- 隐式遍历(迭代):一次操作多个元素
- 读写合一:读数据/写数据用的是一个函数。
- 链式调用可以通过.不断调用Query对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
- 丰富的插件支持
使用JQuery
1.引入jQuery文件
2.入口函数
3.功能实现
JQuery的入口函数
// $ 相当于jquery
// 第一种
$(document).ready(function(){
});
// 第二种
$().ready(function(){
})
// 第三种
$(function(){
// 编写功能实现代码
})
jQuery入口函数与js入口函数的对比:
1.Javascript的入口函数要等到页面中所有资源(包括图片、文件)加拔完成才开始执行。
2.JQuery的入口函数只会等待文档树加载完成就开始执行,并不全等待图片、文件的加载。
例如:
$(function(){
$("#click").click(function(){
// $("div").css("display","block") //显示
$("div").show() //show(1000) 1s过度
// $("div").hide() //hide() 隐藏
})
$("#setup").click(function(){
$("div").html("新增的文本")
})
$("#smale").click(function () {
$("div").css("width","100px");
$("div").css("height","100px");
})
})
1、基本选择器的使用
1.1 基本选择器
名称 | 用法 | 描述 |
ID选择器 | $("#id"); | 获取指定ID的元素 |
类选择器 | $(".class"); | 获取同一类class的元素 |
标签选择器 | $("div"); | 获取同一类标签的所有元素 |
并集选择器 | $("div,p,li""); | 使用逗号分隔,只要符合条件之一就可 |
交集选择器 | $("div.redClass"); | 获取class为redClass的div元素 |
总结:跟css的选择器用法一样,外层加$()。 |
1.2 层次选择器
名称 | 用法 | 描述 |
子代选择器 | $("ul>li"); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $("ul li"); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
案例:
<input type="text" id="one">+
<input type="text" id="two">=
<input type="text" id="result" disabled> <!--disabled:无法选中-->
<input type="button" value="计算" class="btn">
<hr>
<input type="button" value="改变" id="click">
<div class="div0">这是一个div标签</div>
<p class="div0">这是一个p标签</p>
<script>
$(function(){
// 两个数的计算
// 绑定单击事件
$(".btn").click(function(){
// 实现加法运算
// 先获取到输入的两个数,val():可以获取到标签的value值
var first=$("#one").val()
var second=$("#two").val()
var result=parseInt(first)+parseInt(second)
$("#result").val(result)
// document.getElementById("result").value=result
})
// 改变
$("#click").click(function() {
// 利用群组选择器更改div,p标签的文本颜色
$("div,p").css("color","white");
$("div,p").css("font-size","20px");
$("p.div0").css("background-color","orange");
})
})
</script>
2、属性选则器的使用
2.1 基本属性选择器
名称 | 用法 | 描述 |
[attribute] | $("input[checked]").attr('checked",false); | 匹配包含给定属性的元素。常用于单选或复选的checked |
[attribute=value] | $("input[name="username"]").val(""); | 匹配给定的属性是某个特定值的元素。常用于选择指定的input标签。 |
[attribute!=value] | $("div[name="box"]).html(""); | 匹配给定的属性是不包含某个特定值的元素。 |
[attribute^=value] | $("div[class^="b"]").css("background","red"); | 匹配给定的属性是以某些值开始的元素。 |
[attribute*=value] | $("div[class*="b"]").css("background","red"); | 匹配给定的属性是以包含某些值的元素。 |
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
border: 2px solid red;
margin-right: 20px;
display: flex;
text-align: center;
float: left;
}
</style>
</head>
<body>
<button id="btn1">含有class的标签</button>
<button id="btn2">含有class是box1的标签</button>
<button id="btn3">含有class不是box1的标签</button>
<button id="btn4">class以b开头的标签</button>
<button id="btn5">class包含o的标签</button>
<hr>
<div>div标签</div>
<div class="box1">class:box1</div>
<div class="box1">class:box1</div>
<div class="bex2">class:bex2</div>
<div class="pox1">class:pox1</div>
<div class="pox2">class:pox2</div>
<script>
$(function(){
$("#btn1").click(function(){
$("[class]").css("background-color","yellow")
})
$("#btn2").click(function(){
$("[class='box1']").css("background-color","green")
})
$("#btn3").click(function(){
$("div[class!='box1']").css("background-color","orange")
})
$("#btn4").click(function(){
$("[class^='b']").css("background-color","blue")
})
$("#btn5").click(function(){
$("[class*=o]").css("background-color","red")
})
})
</script>
</body>
2.2 操作标签的属性
名称 | 用法 | 描述 |
标签属性方法 | attr(name)/ attr(name. value) | 读/写非布尔值的标签属性 |
标签属性方法 | prop(name)/ prop(name,value) | 读/写布尔值的标签属性 |
删除属性方法 | removeAttr(name)/removeProp(name) | 删除指定名字的属性 |
自定义属性 | data() | 读写标签的附加数据(data-*属性) |
案例:
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll">全选
</th>
<th>课程名称</th>
<th>所属</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>html</td>
<td>web前端</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>html</td>
<td>web前端</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>html</td>
<td>web前端</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>html</td>
<td>web前端</td>
</tr>
</tbody>
</table>
<script>
// prop 布尔类型
$(function(){
// 全选/全不选
$("#selectAll").click(function(){
// 获取全选复选框的选中状态
var isChecked=$("#selectAll").prop("checked")
console.log(isChecked)
// 获取下面的checkbox
$("tbody input[type='checkbox']").prop("checked",isChecked)
})
// 单击下面的复选框
$("tbody input[type='checkbox']").click(function(){
// 第一个值 除了全选以外下面有多少个checkbox
var length=$("tbody input[type='checkbox']").length
// console.log(lenght)
// 第二个值 还要获取被选中的checkbox的个数
var count=$("tbody input[type='checkbox']:checked").length
// console.log(count)
// 判断lenght的值与count的值是否相等,如果相等,则全选的checkbox设置为选中状态
console.log(length)
console.log(count)
if(count==length){
$("#selectAll").prop("checked",true)
}else{
$("#selectAll").prop("checked",false)
}
})
})
</script>
3、基本过滤选择器的使用
3.1 过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
:eq (index) | $("li:eq(2)").css("color", "red"]; | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $("li:odd").css("color","red"); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $("li:even").css("color", "red"); | 获取到的li元素中,选择索引号为偶数的 |
:first | $("tr:first").css("backgroundColor ","red"); | 匹配找到的第一个元索 |
:last | $("td:last").css("backgroundColor","red"); | 匹配找到的最后一个元素 |
:gt(index) | $("li:gt(3)").css("backgroundColor","red"); | 匹配所有大于给定索引值的元素 |
:lt(index) | $("li:It(3)").css("backgroundColor" ,"red"); | 匹配所有小于给定索引值的元素 |
:not(selector) | $("li:gt(3)"):not(":last")").css("backgroundColor", "red"); | 去除所有与给定选择器匹配的元素 |
<hr>
<input type="button" value="隔行变色" id="btn1">
<input type="button" value="数组下标为2" id="btn2">
<input type="button" value="第一行" id="btn3">
<input type="button" value="最后一行" id="btn4">
<input type="button" value="下标1之后,除了最后一行" id="btn5">
<script>
// 实现hover效果 鼠标移动变色
$("tbody tr").mouseover(function(){
$(this).attr("class","hover")
})
$("tbody tr").mouseout(function(){
$(this).removeAttr("class","hover")
})// 隔行变色
$("#btn1").click(function(){
$("tbody tr:odd").css("background-color","yellow")
})// 数组下标为2
$("#btn2").click(function(){
$("tbody tr:eq(2)").css ("background-color","green")
})// 第一行
$("#btn3").click(function(){
$("tbody tr:first").css ("background-color","blue")
})// 最后一行
$("#btn4").click(function(){
$("tbody tr:last").css ("background-color","red")
})// 第一行之后,除了最后一行
$("#btn5").click(function(){
$("tbody tr:gt(1):not(:last)").css ("background-color","red")
})
})
</script>
3.2 筛选选择器
根据内容来过滤页面元素。
名称 | 用法 | 描述 |
:contains() | $("td:contains("0")").css("backgroundColor","red"); | 匹配包含给定文本的元素。 |
:has(selector) | $("td:has("span")").css("backgroundColor","red"); | 匹配包含选择器所匹配的元素的元素 |
:empty | $("td:empty").css("backgroundColor","red"); | 匹配所有不包含子元素或者文本的空元素 |
:parent | $("td:parent").css("backgroundColor","red"); | 匹配含有子元素或者文本的元素 |
3.3 筛选选择器(方法)
名称 | 用法 | 描述 |
children(selector) | $("ul").children("li") | 相当于$("ul>ll"),子类选择器 |
find(selector) | $("uI").find("li”); | 相当于$(ul l""),后代选择器 |
siblings(selector) | $("#first").siblings("li"); | 查找兄弟节点,不包括自己本身。 |
parent() | $("#first").parent(); | 查找父亲 |
eq(index) | $("li").eq(2); | 相当于$("li:eq(2)"),index从0开始 |
next() | s("li").next() | 找下一个兄弟 |
prev() | s("li").prev() | 找上一次兄弟 |
$(function(){
// 给li标签绑定鼠标移入事件
$("ul li").mouseover(function(){
// 如何获取到当前鼠标移入的li标签,this
// 给鼠标移入的li标签的opacity设置为1,将其他的兄弟标签li的opacity设置为0.5
$(this).css("opacity",1).siblings().css("opacity",0.5) //siblings()除了自己兄弟元素
})
$("ul li").mouseout(function(){
$(this).css("opacity",1).siblings().css("opacity",1)
})
})
4、可见性过滤选择器的使用
根据元素是否显示来选择
- :hidden:匹配所有的不可见元素
- :visible:匹配所有的可见元素
一般都是和一种类型的元素搭配使用
$("div:visible").hide(4000);把显示的div用4秒钟隐藏掉,
$("div:hidden").show("slow");把隐藏的div慢慢地显示出来。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
#green{
display: none;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div id="green"></div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<script>
$(function(){
$("#btn1").click(function(){
// $("div:visible")中:visible是用来获取可见的元素
$("div:visible").hide(1000)//hide()隐藏
})
$("#btn2").click(function(){
// $("div:hidden")中:hidden是用来获取隐藏的元素
$("div:hidden").show(1000)//show()隐藏
})
})
</script>
</body>