JQuery入门及选择器

最新推荐文章于 2024-08-27 13:38:21 发布

Hrgge^0^

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量203

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Hrgge/article/details/127318753

版权

JQuery概念

JQuery是一个快速的、简洁的JavaScript库。

JQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理，动画设计和Ajax交互。

JQuery本质：就是学习调用这些函数(方法)。

JQuery中的顶级对象$

1.$是JQuery的别称，在代码中可以使用JQuery代替，但一般为了方便，通常都直接使用$

2.$是JQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成JQuery对象，就可以调用JQuery的方法

JQuery的优点

1.轻量级

2.跨浏览器兼容，基本兼容了现在主流的浏览器

3.链式编程、隐式迭代

4.对事件、样式、动画支持、大大简化了DOM操作

5.支持插件扩展开发。有着丰富的第三方的插件。例如：树形菜单、日期控件、轮播图等

6.免费、开源

1.基础选择器

$("选择器")

名称	用法	描述
ID选择器	$("#id")	获取指定id的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

2.层级选择器

常用的两个分为后代选择器和子代选择器

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意:并不会获取子孙层级的元素
后代选择器	$("ul li")	使用空格，代表后代选择器，获取ul下的所有li元素，包括子孙等

3.属性选择器

属性选择器是制定DOM元素对应属性的一种选择器

名称	用法	描述
属性名称选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名='值'] []...")	包含多个属性条件的选择器

4.过滤选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

5.表单过滤选择器

名称	用法	描述
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获取下拉框选中的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单过滤器</title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//按钮点击事件
				$("#btn").click(function(){
					var jq1=$("input:enabled");
					var jq2=$("input:checked");
					for(var i=0;i<jq2.length;i++){
						var dom=jq2[i];
						alert(dom.value);
					}
				});
			});
		</script>
	</head>
	<body>
		<form action="#" method="post">
			可用表单:<input type="text" name="name" value="" /><br />
			不可用表单:<input type="text" name="id"  value="编号10065" disabled="true"/><br />
			单选框:<input type="radio" name="sex"  value="男" />男
			<input type="radio" name="sex"  value="女" />女<br />
			复选框:<input type="checkbox" name="hobby" value="唱歌" />唱歌
			<input type="checkbox" name="hobby" value="rap" />rap
			<input type="checkbox" name="hobby" value="篮球" />篮球<br />
			下拉框:<select name="addr">
				<option value="河南">河南</option>
				<option value="湖北">湖北</option>
				<option value="四川">四川</option>
				<option value="重庆">重庆</option>
			</select><br />
			<button type="button" id="btn">按钮</button>
		</form>
	</body>
</html>

Hrgge^0^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery入门及选择器

2.$是JQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成JQuery对象，就可以调用JQuery的方法。JQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理，动画设计和Ajax交互。1.$是JQuery的别称，在代码中可以使用JQuery代替，但一般为了方便，通常都直接使用$有着丰富的第三方的插件。JQuery是一个快速的、简洁的JavaScript库。4.对事件、样式、动画支持、大大简化了DOM操作。3.链式编程、隐式迭代。
复制链接

扫一扫