其他分享
首页 > 其他分享> > jQuery

jQuery

作者：互联网

$()等同于jQuery()
1.当传入css选择器：以字符串的方式传入
2.传递一个DOM对象，或者document对象，window对像
3.传递一个html文本,会自动创建这个元素
4.传递一个函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
	<!--当页面加载完执行-->
		$(document).ready(function(){
			$("button").click(function(){
			<!--因为每个方法都返回一个对象，因此可以链式调用方法-->
				$("p").css("color","red").hide(5000);
			})
		})
		//以上代码可以简写为
		$(function(){
				$("button").click(function(){
				<!--因为每个方法都返回一个对象，因此可以链式调用方法-->
				$("p").css("color","red").hide(5000);
			})
		})
	</script>
</head> 
<body>
	<button type="button" name="button">请点击我</button>
	<p>这是一句测试文本</p>
	<p>这是一句测试文本</p>
	<p>这是一句测试文本</p>
</body>
</html>

通常jQuey()返回的是一个数组可以通过each来遍历每个元素，但不通过each也可以操纵整体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("button").click(function(){
				// $("li").css("color", "red").hide(5000);
				$("li").each(function(i){
					$(this).css("color","red").html(i+"---"+"www.php.cn");
				})
			})
		})
	</script>
</head>
<body>
	<button type="button" name="button">请点击我</button>
	<ul>
		<li>php中文网1</li>
		<li>php中文网2</li>
		<li>php中文网3</li>
		<li>php中文网4</li>
	</ul>
</body>
</html>

jQuery和DOM对象相互转换的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			//将jQuery对象转换成js对象
			$("li").get(0).style.color = "red";

			//将js对象转换成jQuery对象
			$(document.getElementsByTagName("li")[1]).css("color","yellow");
		})
		
	</script>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>
</html>

emmet

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	.class1
	<div class="class1"></div>

	#id1
	<div id="id1"></div>

	p.id2
	<p class="id2"></p>
	
	a:{导航}
	<a:>导航</a:>

	a:link
	<a href="http://"></a>

	a:[href="www.baidu.com"]
	<a: href="www.baidu.com"></a:>

	#class2[style="width:100px; height:100px; background-color:red"]
	<div id="class2" style="width:100px; height:100px; background-color:red"></div>

	ul.nav>li.item*8
	<ul class="nav">
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
	</ul>

	ul.nav>li.item*8>a{导航$$}
	<ul class="nav">
		<li class="item"><a href="">导航01</a></li>
		<li class="item"><a href="">导航02</a></li>
		<li class="item"><a href="">导航03</a></li>
		<li class="item"><a href="">导航04</a></li>
		<li class="item"><a href="">导航05</a></li>
		<li class="item"><a href="">导航06</a></li>
		<li class="item"><a href="">导航07</a></li>
		<li class="item"><a href="">导航08</a></li>
	</ul>
	
	ul.nav>li.item*8>a{导航$$@-}
	<ul class="nav">
		<li class="item"><a href="">导航08</a></li>
		<li class="item"><a href="">导航07</a></li>
		<li class="item"><a href="">导航06</a></li>
		<li class="item"><a href="">导航05</a></li>
		<li class="item"><a href="">导航04</a></li>
		<li class="item"><a href="">导航03</a></li>
		<li class="item"><a href="">导航02</a></li>
		<li class="item"><a href="">导航01</a></li>
	</ul>
	
	ul.nav>li.item*8>a{导航$@100}
	<ul class="nav">
		<li class="item"><a href="">导航100</a></li>
		<li class="item"><a href="">导航101</a></li>
		<li class="item"><a href="">导航102</a></li>
		<li class="item"><a href="">导航103</a></li>
		<li class="item"><a href="">导航104</a></li>
		<li class="item"><a href="">导航105</a></li>
		<li class="item"><a href="">导航106</a></li>
		<li class="item"><a href="">导航107</a></li>
	</ul>
</body>
</html>

jQuery对属性的操作（不会对源代码有改变,一刷行立马发生变化）
attr()
removeAttr()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			console.log($("img").attr("alt"));
			$("img").attr("src", "gf2.jpg");
			$("img").removeAttr("src");
		});
	</script>
</head>
<body>
	<img src="bazi.png" alt="bazi">
</body>
</html>

jQuery修改css样式(会改变源码):

$("").css("属性","属性值",...);
//属性值可以是回调函数,会有两个参数,第一个是当前对象索引,第二个是该属性的原有值,属性可以用驼峰也可以用-连接
$("").css("border-radius",function(i, value){return Math.round(1.2*value);})

jquery修改类样式:(会修改源码)
首先在html文件中创建类样式:
如果要使用该样式:
$("").addClass(“类名”);
判断是否有该类样式:
$("").hasClass(“类名”);
移除该类样式
$("").removeClass(“类名”);
如果无该样式则添加,有则删除
$("").toogleClass(“类名”)

jquery获取标签内容:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			console.log($("li").eq(4).text());
			console.log($("li").eq(1).html());
		})
	</script>
</head>
<body>
	<ul>
		<li>"php中文网01"</li>
		<li>"php中文网02"</li>
		<li>"php中文网03"</li>
		<li>"php中文网04"</li>
		<li>"php中文网05"</li>
	</ul>
</body>
</html>

jquery选择器:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../jquery.js"></script>
	<script>
		$(function(){
			1.属性过
			$("[style]").css("background-color", "red");
			//2.完全匹配属性值
			$("[title='网站名称']").css("background-color","red");
			3.指定属性值的起始字符串
			$("[title^='网站']").css("background-color","black");
			4.指定属性值的末尾字符串
			$("[title$='网站']").css("background-color", "yellow");
			//5.指定属性值与该字符串不相匹配
			$("[title!='abc']").css("background-color", "orange");
			//6.模糊匹配,属性值内含有该字符串
			$("[title*='Python']").css("background-color", "blue");
			//7.含有该单词
			$("[title~='Python']").css("background-color", "grey");
			//8.多属性查询
			$("[title][class]").css("background-color", "pink");
		})
	</script>
</head>
<body>
	<h2>属性过滤器</h2>
	<ul>
		<li title="网站名称">PHP中文网01</li>
		<li title="网站标题" class=>PHP中文网02</li>
		<li title="永久免费的学习平台">PHP中文网03</li>
		<li title="前端开发课程">PHP中文网04</li>
		<li title="免费PHP教学视频">PHP中文网05</li>
		<li title="PHP Python JAVA">PHP中文网06</li>
		<li style="">PHP中文网07</li>
		<li>PHP中文网08</li>
	</ul>
</body>
</html>

//位置过滤器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../jquery.js"></script>
	<script>
		$(function(){
			//相等
			$("li:eq(0)");
			//大于
			$("li:gt(7)");
			//小于
			$("li:lt(2)");
			//第一个
			$("li:first");
			//最后一个
			$("li:last");
			//偶数
			$("li:even");
			//奇数
			$("li:odd");
			//全选
			$("li:nth-child(n)");
			//选取某一个如第一个
			$("li:nth-child(1)");
			//选取偶数个
			$("li:nth-child(even)");
			//选取奇数个
			$("li:nth-child(odd)");
		})
	</script>
</head>
<body>
	<h2>属性过滤器</h2>
	<ul>
		<li title="网站名称">PHP中文网01</li>
		<li title="网站标题" class=>PHP中文网02</li>
		<li title="永久免费的学习平台">PHP中文网03</li>
		<li title="前端开发课程">PHP中文网04</li>
		<li title="免费PHP教学视频">PHP中文网05</li>
		<li title="PHP Python JAVA">PHP中文网06</li>
		<li style="">PHP中文网07</li>
		<li>PHP中文网08</li>
	</ul>
</body>
</html>

//根据关系来选择元素
/*
	A 空格 B 在A元素所有子孙元素中查询B元素
	A > B 仅在A元素的子元素中查找B
	A ~ B:查找与A有着共同父级的元素
	A + B 查找A后面的第一个兄弟元素
*/

标签：jQuery,color,li,中文网,PHP,导航,css
来源： https://blog.csdn.net/qq_43428547/article/details/99720727