jQuery入门以及常用选择器语法

最新推荐文章于 2024-03-11 09:35:50 发布

幽游白酥

最新推荐文章于 2024-03-11 09:35:50 发布

阅读量392

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/duan_yuer/article/details/118096570

版权

3.1基础语法： $(selector).action()

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种写法：

$(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事件。通过获取器直接进行操作。

幽游白酥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门以及常用选择器语法

1、什么是jQueryjQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"（后面会有提现）的JavaScript库。jQuery还提供了大量的插件。目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。2、jQuery的安装2.1 jQuery的版本jQuery版本有很多，分为1.x 2.x 3.x1.x版本：能够兼容IE678浏览器。2.x版本：不兼容IE678浏览器 1.x和2.x版本j
复制链接

扫一扫