目录
1、什么是jQuery
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"(后面会有提现)的JavaScript库。jQuery还提供了大量的插件。 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
2、jQuery的安装
2.1 jQuery的版本
jQuery版本有很多,分为1.x 2.x 3.x
1.x版本:能够兼容IE678浏览器。
2.x版本:不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678) 国内多数网站还在使用1.x的版本。
2.2 jQuery的下载
jQuery有两个版本:生成环境使用的和开发测试环境使用的。
1.Production version - 用于实际的网站中,已被精简和压缩。
2.Development version - 用于测试和开发(未压缩,是可读的代码)
下载链接:https://jquery.com/download/
2.3 jQuery的使用
jQuery 库是一个 JavaScript 文件,我们可以直接在 HTML页面中通过script 标签引用它,跟引用自己的外部JavaScript脚本文件一样的语法。
<head>
<script src="jquery-1.11.1.js"></script>
</head>
3、jQuery语法结构
3.1基础语法: $(selector).action()
美元符号定义 jQuery 选择符
(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
3.2文档就绪事件
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。 如果在文档没有完全加载之前就运行函数,操作可能失败。
文档就绪事件有2种写法:
1.
$(document).ready(function(){
});
2.也是常用方法
$(function(){
// 开始写 jQuery 代码...
});
4、jQuery选择器:
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经 存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头:$()。
4.1 元素/标签选择器
jQuery 元素选择器基于元素/标签名选取元素。
语法:$("标签名称")
<script>
//1.标签选择器
$(function(){
var divList=$("div");//获取所有div标签的集合
console.log(divList.length);//输出数组的长度
for(var i=0;i<divList.length;i++){//遍历集合
console.log(divList[i]);//js的对象
console.log($(divList[i]));//转换为jquery对象
}
});
</script>
<body>
<div id="1">
1
</div>
<div id="2">
2
</div>
<div id="3">
3
</div>
</body>
4.2 #id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以在页面中选取唯一的元素需要通过 #id 选择器。
语法:$("#p1")
$(function(){
idselect();
});
//2.id选择器
function idselect(){
var id=$("#1");
console.log(id.html());
}
<body>
<div id="1">这是id选择器</div>
</body>
4.3 .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法:$(".mydiv")
<style>
.mydiv{
font-size: 25px;
}
</style>
<script>
$(function(){
classSelect();
});
//3.class选择器
function classSelect(){
var c=$(".mydiv");
console.log(c.length);
}
</script>
<div id="2" class="mydiv">
2
</div>
<div id="3" class="mydiv">
3
</div>
4.4 并集选择器
将每一个选择器匹配到的元素合并后一起返回。
语法:$("div,ul,li,.mydiv")
$(function(){
unionSelect();
});
//4.并集选择器
function unionSelect(){
var c=$("#1,ul,li,.mydiv");
console.log(c.length);
}
<body>
<div id="1" >这是id选择器</div>
<div id="2" class="mydiv">
2
</div>
<div id="3" class="mydiv">
3
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
4.5 后代选择器
在给定的祖先元素下匹配所有的后代元素
语法:$("form input")
$(function(){
descendantSelect();
});
//5.后代选择器
function descendantSelect(){
var c=$("ul li");
console.log(c.length);
}
<ul>
<li>子1
<li>孙</li>
</li>
<li>子2</li>
</ul>
4.6 相邻选择器
匹配所有紧接在 prev 元素后的 next 元素
语法:$("label + input")
4.7 同辈选择器
匹配 prev 元素之后的所有 siblings 元素
语法:$("form ~ input")
5使用js与jQuery实现全选案例
jQuery:
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
$("#all").click(function(){
var flag=$(this).prop("checked");
var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){
$(oneList[i]).prop("checked",flag);
}
});
$("input[name='one']").click(function(){
var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){
if(!$(oneList[i]).prop("checked")){
$("#all").prop("checked",false);
return;
}
}
$("#all").prop("checked",true);
});
});
</script>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" height="160px">
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>1</td>
<td>小熊饼干1</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>2</td>
<td>小熊饼干2</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>3</td>
<td>小熊饼干3</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
</table>
</body>
使用js实现:
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
td,th{
padding: 10px;
}
</style>
<script>
function bianli(){
var tab=document.getElementById("myTable");//获取到了表格的js对象
//获取表格的所有行
var trArr=tab.rows;
//遍历行
for(var i=0;i<trArr.length;i++){
var trObj=trArr[i];
//alert("行的下标索引:"+trObj.rowIndex);
//获取每行的单元格的集合
var tdArr=trObj.cells;
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){
var tdObj=tdArr[j];
var html=tdObj.innerHTML;//获取每个单元格中的内容
var index=tdObj.cellIndex;//获取每个单元格的下标索引
str+=index+"-"+html+"=====";
}
console.log("行的下标索引:"+trObj.rowIndex+":"+str);
}
}
function addRow(){
//获取到表格的对象
var tab=document.getElementById("myTable");
//给表格添加一行
var newTr=tab.insertRow();//创建了一个空行,在页面上看不出来
//给新创建的行添加列
var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格
var newTd2=newTr.insertCell();
var newTd3=newTr.insertCell();
var newTd4=newTr.insertCell();
var newTd5=newTr.insertCell();
//给每一个单元格中添加内容
var num=parseInt(Math.random()*10)+1;
newTd1.innerHTML=num;
newTd2.innerHTML="小熊饼干"+num;
newTd3.innerHTML="$125";
newTd4.innerHTML="1";
newTd5.innerHTML='<button type="button" onclick="delRow(this)">
删除</button>';
}
function delRow(btn){
var tab=document.getElementById("myTable");
//btn:表示点击的当前的删除按钮,
//btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的
按钮的父元素td的父元素tr
var trIndex=btn.parentNode.parentNode.rowIndex;
//根据行的下标索引删除行
tab.deleteRow(trIndex);
}
</script>
</head>
<body>
<button type="button" onclick="bianli()">遍历表格</button>
15.4 省市级联特效
<button type="button" onclick="addRow()">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>¥125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>¥125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button>
</td>
</tr>
</table>
</body>
结论:
jqery和js相比降低了代码的耦合性,不需要编写大量的on事件。通过获取器直接进行操作。