jQuery基础

最新推荐文章于 2024-07-26 11:41:15 发布

水沉草木

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量170

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_69761234/article/details/126419708

版权

获取jQuery

下载下来后引入JS文件

 <script src="下载JS文件地址" ></script>

jQuery基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="myJquery.js"></script>
	</head>
	<body>
	</body>
	<script>
         //为页面加载事件绑定方法
		 $(document).ready(function(){
		 	alert("页面加载完毕之后弹出警告窗");
		 });
		//简写方式
		$(function(){
			alert("页面加载完毕之后弹出警告窗2");
		});
	</script>
</html>

jQuery选择器

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

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

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$("h2" )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,...,selectorN	将每一个选择器匹配的元素合并后一起返回	$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="myJquery.js"></script>
	</head>
	<body>
		<h2>二级标题标签</h2>
		<p id="test">段落标签1</p>
		<p class="demo">段落标签2</p>
		<ul>
			<li>qwert</li>
			<li class="demo">yuiop</li>
			<li>asdfg</li>
		</ul>
	</body>
	<script>
		//jQUery获取元素并设置字体颜色
		// $("h2").css("color","#f00");
		// $("li").css("color","#00f");
		// $("#test").css("color","#ff0");
		// $(".demo").css("color","#0ff");
		// $("h2,#test").css("color","#00f");
		$("*").css("color","#00f");

	</script>
</html>

jQuery层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/myJquery.js"></script>
	</head>
	<body>
		<p>1</p>
		<p id="test">2</p>
		<p>3</p>
		<ul>
			<li><p>4</p></li>
			<li><p>5</p></li>
			<li><p>6</p></li>
			<li><p>7</p></li>
		</ul>
		<p>8</p>
	</body>
	<script>
		// 后代选择器
		// $("body p").css("background-color","#ccc");
		//子代选择器
		// $("body>p").css("background-color","#ccc");
		
		// 相邻兄弟选择器
		// $("#test+p").css("background-color","#ccc");
		
		//通用兄弟选择器
		$("#test~p").css("background-color","#ccc");
		
	</script>
</html>

jQuery属性选择器

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^='en']" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" )选取href属性值中含有txt的元素

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>CSS3属性选择器的使用</title>
		<style type="text/css">
			/*此段代码只是让结构更美观，后续会详细讲解*/
			.demo a {
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				text-align: center;
				background: #aac;
				color: blue;
				font: bold 20px/50px Arial;
				margin-right: 5px;
				text-decoration: none;
				margin: 5px;
			}
			
		</style>
		<script src="myJquery.js"></script>
	</head>
	<body>
		<p class="demo">
			<a href="http://www.baidu.com" class="links item first" id="first">1</a>
			<a href="" class="links active item" title="test website" target="_blank">2</a>
			<a href="sites/file/test.html" class="links item">3</a>
			<a href="sites/file/test.png" class="links item"> 4</a>
			<a href="sites/file/image.jpg" class="links item">5</a>
			<a href="efc" class="links item" title="website link">6</a>
			<a href="/a.pdf" class="links item">7</a>
			<a href="/abc.pdf" class="links item">8</a>
			<a href="abcdef.doc" class="links item">9</a>
			<a href="abd.doc" class="linksitem last" id="last">10</a>
		</p>
	</body>
	<script>
		//选择具有id属性的a标签
		$("a[class]").css("color","skyblue")
		$("a[id]").css("background-color","#f00");
		// $("a")		
	</script>
</html>

过滤选择器：通过特定的过滤规则来筛选出所需的元素

基本过滤选择器

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="myJquery.js"></script>
	</head>
	<body>
		<ul>
			<li>qwert</li>
			<li>yuiop</li>
			<li>asdfg</li>
			<li>hjkl</li>
			<li>zxcvb</li>
		</ul>
	</body>
	<script>
		// $("li:eq(1)").css("background-color","#f00");
		// $("li:gt(1)").css("background-color","#f00");
		// $("li:lt(3)").css("background-color","#f00");
		$("li:first").css("color","blue");
	</script>
</html>

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
<style type="text/css">
    #txt_show {display:none; color:#00C;}
    #txt_hide {display:block; color:#F30;}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素"  id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("#show").click(function(){
            $("p:hidden").show();

        })
        $("#hide").click(function(){
            $("p:visible").hide();
        })
    })
</script>
</body>
</html>

水沉草木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）$(" li:first" )选取所有元素中的第一个元素。$(" li:last" )选取所有元素中的最后一个元素。$(" h2+dl " )选取紧邻元素之后的同辈元素$(" h2~dl " )选取元素之后所有的同辈元素$(" li:even" )选取索引是偶数的所有元素。$(" li:odd" )选取索引是奇数的所有元素。
复制链接

扫一扫