jQuery

最新推荐文章于 2024-05-24 09:44:18 发布
最新推荐文章于 2024-05-24 09:44:18 发布
阅读量294 收藏
点赞数
分类专栏： JavaWeb 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65508929/article/details/128210262
版权

文章目录

基本介绍

  • 什么是jQuery

顾名思义，jQuery也就是JavaScript和查询（Query），它就是辅助JavaScript开发的 js 类库

  • jQuery核心思想

它的核心思想是 write less, do more(写得更少，做的更多)，所以它实现了很多浏览器的兼容问题

  • jQuery流行程度

jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

  • jQuery好处

jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能

jQuery初体验

  • 需求：使用jQuery给一个按钮绑定单击事件
  • 注意：使用前要先引入jQuery类库（）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// window.onload = function () {
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement] ===> DOM对象
		// 	btnObj.onclick = function () {
		// 		alert("js原生的单机事件")；
		// 	}
		// }

		alert($);

		//jQuery的方式
		$(function () { //表示页面加载完成之后，相当于onload事件 window.onload = function () { }
			// var btnObj = document.getElementById("btnId");
			// alert(btnObj)
			var $btnObj = $("#btnId"); //表示按id查询标签对象
			$btnObj.click(function () { //绑定单击事件
				alert("jQuery的单击事件");
			});
		});

	</script>
</head>
<body>

	<button id="btnId">SayHello</button>

</body>
</html>

image.png
:::tips
常见问题：

  1. 使用jQuery一定要引入jQuery库吗？ 必须引入
  2. jQuery中的 $ 到底是什么？ $是一个函数

image.png
image.png

  1. 怎么为按钮添加点击响应函数
    1. 使用jQuery查询到标签对象
    2. 使用标签对象.click(function() {});
      :::

jQuery核心函数

:::info

  • $ 是jQuery的核心函数，能完成 jQuery的很多功能， ( ) 就 是 调 用 () 就是调用 ()就是调用这个函数
    :::

$()传入的参数为【函数】时

  • 表示页面加载完成之后，会自动执行，即相当于 window.onload = function() {};
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {
        alert("页面加载完成之后，自动调用");
    });
</script>
</head>
<body>
<!--    <div>-->
<!--        <span>div-span1</span>-->
<!--        <span>div-span2</span>-->
<!--    </div>-->

    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

image.png

$()传入的参数为【HTML字符串】时

  • 会创建这个html标签对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {

        //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
        $("     <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");

    });

</script>
</head>
<body>
<!--    <div>-->
<!--        <span>div-span1</span>-->
<!--        <span>div-span2</span>-->
<!--    </div>-->

    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>
  • 注意：必须将代码写进文档加载函数中，即文档加载完成后执行这个函数，不然如果说写在外面，按照JS的读写规范-从上往下读取，会发现写入的代码无效

image.png

$()传入的参数为【选择器字符串】时

:::tips
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id属性值")； id选择器…(“标签名”)； 标签名选择器，根据指定的标签名查询标签对象
$(“.class属性值”)； 类型选择器，可以根据class属性查询标签对象
:::

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {
        
        //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
        alert($("button").length);
    
    });
    
</script>
</head>
<body>
<!--    <div>-->
<!--        <span>div-span1</span>-->
<!--        <span>div-span2</span>-->
<!--    </div>-->

    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

image.png

$()传入的参数为【DOM对象】

  • 会将这个DOM对象转换成jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {

        //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
        var btnObj = document.getElementById("btn01");
        // alert(btnObj);
        // alert($(btnObj));//[object Object]

        // alert($("<h1><h1/>"));//[object Object]

        alert($("button"));//[object Object]

    });

</script>
</head>
<body>
<!--    <div>-->
<!--        <span>div-span1</span>-->
<!--        <span>div-span2</span>-->
<!--    </div>-->

    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

image.png

jQuery对象和DOM对象区分

JQuery对象和DOM对象的分析

DOM对象

:::tips

  1. 通过getElementById() 查询出来的标签对象是DOM对象
  2. 通过getElementsByName() 查询出来的标签对象是DOM对象
  3. 通过getElementsByTagName() 查询出来的标签对象是DOM对象
  4. 通过createElement() 方法创建的对象是DOM对象
    :::
  • DOM对象 alert 出来的效果是：[Object HTML 标签名 Element]
jQuery对象
  1. 通过jQuery提供的API创建的对象，是jQuery对象

image.png

  1. 通过jQuery包装的DOM对象，也是jQuery对象

image.png

  1. 通过jQuery提供的API查询到的对象，是jQuery对象

image.png

  • jQuery对象 alert 出来的效果是：[Object Object]

jQuery对象的本质

  • jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数
  • DOM对象的数组

image.png

  • jQuery提供的一系列功能函数

image.png
image.png

jQuery对象和DOM对象使用区别

jQuery对象不能使用DOM对象的属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function(){

		document.getElementById("testDiv").innerHTML = "这是DOM对象的属性InnerHTML";
		$("#testDiv").innerHTML = "这是DOM对象的属性InnerHTML";

	});

</script>
</head>
<body>
	
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>
</html>
  • jQuery对象无法使用DOM对象的属性InnerHTML

image.png

DOM对象也不能使用jQuery对象的属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function(){

		$("#testDiv").click(function () {
			alert("click() 是jQuery对象的方法");
		});

		document.getElementById("testDiv").click(function () {
			alert("click() 是jQuery对象的方法");
		});

	});

</script>
</head>
<body>
	
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>
</html>
  • DOM对象无法使用jQuery对象的方法click()

image.png

DOM对象和jQuery对象互转

  1. DOM对象转换为jQuery对象
    1. 先有DOM对象
    2. $(DOM对象) 就可以转换成 jQuery对象
  2. jQuery对象转换为DOM对象
    1. 先有jQuery对象
    2. jQuery对象[下标]取出相应的DOM对象

image.png
image.png
image.png
image.png

jQuery选择器

基本选择器

image.png

#id：根据id查找标签对象

image.png

//1.选择 id 为 one 的元素 "background-color","#bbffaa"
    $("#btn1").click(function () {
      // alert("单击事件");
      // css() 方法可以设置或获取样式
      $("#one").css("background-color", "#bbffaa");
    });
element：根据标签名查找标签对象

image.png

//3.选择 元素名是 div 的所有元素
    $("#btn3").click(function () {
      $("div").css("background-color", "#bbffaa");
    });
.class：根据class查找标签对象

image.png

//2.选择 class 为 mini 的所有元素
    $("#btn2").click(function () {
      $(".mini").css("background-color", "#bbffaa");
    });
*：表示任意，所有的元素

image.png

//4.选择所有的元素
    $("#btn4").click(function () {
      $("*").css("background-color", "#bbffaa");
    });
selector1，select02：合并选择器1、选择器2的结果并返回

image.png

  • p.myClass表示标签名必须是p标签，而且class类型还要是myClass
  • 注意：结果的顺序跟页面标签的顺序有关，从上到下
//5.选择所有的 span 元素和id为two的元素
    $("#btn5").click(function () {
      $("span,#two").css("background-color", "#bbffaa");
    });
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function () {
				//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				$("#btn1").click(function () {
					// alert("单击事件");
					// css() 方法可以设置或获取样式
					$("#one").css("background-color", "#bbffaa");
				});

				//2.选择 class 为 mini 的所有元素
				$("#btn2").click(function () {
					$(".mini").css("background-color", "#bbffaa");
				});

				//3.选择 元素名是 div 的所有元素
				$("#btn3").click(function () {
					$("div").css("background-color", "#bbffaa");
				});

				//4.选择所有的元素
				$("#btn4").click(function () {
					$("*").css("background-color", "#bbffaa");
				});

				//5.选择所有的 span 元素和id为two的元素
				$("#btn5").click(function () {
					$("span,#two").css("background-color", "#bbffaa");
				});

			});

		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

层级选择器

image.png

ancestor descendant：在给定的祖先元素下匹配所有的后代元素

image.png

//1.选择 body 内的所有 div 元素 
    $("#btn1").click(function () {
      $("body div").css("background-color", "#bbffaa");
    });
parent > child：在给定的父元素下匹配所有的子元素

image.png

//2.在 body 内, 选择div子元素  
    $("#btn2").click(function () {
      $("body > div").css("background-color", "#bbffaa");
    });
prev + next：匹配所有紧接在prev元素后的next元素

image.png

//3.选择 id 为 one 的下一个 div 元素 
    $("#btn3").click(function () {
      $("#one + div").css("background-color", "#bbffaa");
    });
prev ~ sibings：匹配prev元素之后的所有siblings元素

image.png

//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
    $("#btn4").click(function () {
      $("#two ~ div").css("background-color", "#bbffaa");
    });
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			//以上式子是 $(function() {}); 的全写

				//1.选择 body 内的所有 div 元素 
				$("#btn1").click(function () {
					$("body div").css("background-color", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function () {
					$("body > div").css("background-color", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function () {
					$("#one + div").css("background-color", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function () {
					$("#two ~ div").css("background-color", "#bbffaa");
				});

			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>
补充 - DOM加载完成时运行的代码

image.png

过滤选择器

基本过滤器

image.png

:first：获取第一个元素

image.png

//1.选择第一个 div 元素  
    $("#btn1").click(function(){
      $("div:first").css("background", "#bbffaa");
    });
:last：获取最后一个元素

image.png

//2.选择最后一个 div 元素
    $("#btn2").click(function(){
      $("div:last").css("background", "#bbffaa");
    });
:not(selector)：去除所有与给定选择器匹配的元素

image.png

//3.选择class不为 one 的所有 div 元素
    $("#btn3").click(function(){
      $("div:not(.one)").css("background", "#bbffaa");
    });
:even：匹配所有索引值为偶数的元素，从0开始计数

image.png

//4.选择索引值为偶数的 div 元素
    $("#btn4").click(function(){
      $("div:even").css("background", "#bbffaa");
    });
:odd：匹配所有索引值为奇数的元素，从0开始计数

image.png

//5.选择索引值为奇数的 div 元素
    $("#btn5").click(function(){
      $("div:odd").css("background", "#bbffaa");
    });
:eq(index)：匹配一个给定索引值的元素

image.png

//7.选择索引值为等于 3 的 div 元素
    $("#btn7").click(function(){
      $("div:eq(3)").css("background", "#bbffaa");
    });
:gt(index)：匹配所有大于给定索引值的元素

image.png

//6.选择索引值为大于 3 的 div 元素
    $("#btn6").click(function(){
      $("div:gt(3)").css("background", "#bbffaa");
    });
:lt(index)：匹配所有小于给定索引值的元素

image.png

//8.选择索引值为小于 3 的 div 元素
    $("#btn8").click(function(){
      $("div:lt(3)").css("background", "#bbffaa");
    });
:header：匹配如 h1，h2，h3之类的标题元素

image.png

//9.选择所有的标题元素
    $("#btn9").click(function(){
      $(":header").css("background", "#bbffaa");
    });
:animated：匹配所有正在执行动画效果的元素

image.png

//10.选择当前正在执行动画的所有元素
    $("#btn10").click(function(){
      $(":animated").css("background", "#bbffaa");
    });

//11.选择没有执行动画的最后一个div
    $("#btn11").click(function () {
      $("div:not(:animated):last").css("background", "#bbffaa");
    });
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});

				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function () {
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
<!-- 	<div>
	:first 			
	:last 			
	:not(selector) 	
	:even 			
	:odd 			
	:eq(index)		 
	:gt(index) 		
	:lt(index) 		
	:header 		
	:animated 		
	</div> -->
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>
内容过滤器

image.png

:contains(text)：匹配包含给定文本的元素

image.png

//1.选择 含有文本 'di' 的 div 元素
  $("#btn1").click(function(){
     $("div:contains('di')").css("background", "#bbffaa");
  });
:empty：匹配所有不包含子元素或者文本的空元素

image.png

//2.选择不包含子元素(或者文本元素) 的 div 空元素
    $("#btn2").click(function(){
      $("div:empty").css("background", "#bbffaa");
    });
:parent：匹配含有子元素或者文本的元素

image.png

//4.选择含有子元素(或者文本元素)的div元素
    $("#btn4").click(function(){
      $("div:parent").css("background", "#bbffaa");
    });
:has(selector)：匹配含有选择器所匹配的元素的元素

image.png

//3.选择含有 class 为 mini 元素的 div 元素
    $("#btn3").click(function(){
      $("div:has(.mini)").css("background", "#bbffaa");
    });
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
	
				anmateIt();				
			});
			
			/** 
			:contains(text)   
			:empty 			  
			:has(selector) 	
			:parent 			
			*/
			$(document).ready(function(){
				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function(){
					$("div:contains('di')").css("background", "#bbffaa");
				});

				//2.选择不包含子元素(或者文本元素) 的 div 空元素
				$("#btn2").click(function(){
					$("div:empty").css("background", "#bbffaa");
				});

				//3.选择含有 class 为 mini 元素的 div 元素
				$("#btn3").click(function(){
					$("div:has(.mini)").css("background", "#bbffaa");
				});

				//4.选择含有子元素(或者文本元素)的div元素
				$("#btn4").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
		<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
		<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
		<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>
属性过滤器

image.png

[attribute]：匹配包含给定属性的元素

image.png

//1.选取含有 属性title 的div元素
  $("#btn1").click(function() {
     $("div[title]").css("background", "#bbffaa");
  });
[attribute = value]：匹配给定的属性是某个特定值的元素

image.png

//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
[attribute != value]：匹配所有不包含指定的元素，或者属性不等于特定值的元素

image.png

//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
[attribute ^= value]：匹配给定的属性是以某些值开始的元素

image.png

//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
[attribute $= value]：匹配给定的属性是以某些值结尾的元素

image.png

//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
[attribute *= value]：匹配给定的属性是以包含某些值的元素

image.png

//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
[attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用

image.png

//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});

//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
表单过滤器
:input：匹配所有input、textarea、select和button元素

image.png

:text：匹配所有文本输入框

image.png

:password：匹配所有的密码输入框

image.png

:radio：匹配所有的单选框

image.png

:checkbox：匹配所有的复选框

image.png

:submit：匹配所有提交按钮

image.png

:image：匹配所有img标签

image.png

:reset：匹配所有重置按钮

image.png

:button：匹配所有input type = button按钮

image.png

:file：匹配所有 input type = file 文件上传

image.png

:hidden：匹配所有不可见元素 display：none 或 input type = hidden

image.png

表单对象属性过滤器

image.png

:enabled：匹配所有可用元素

image.png

//1.对表单内 可用input 赋值操作
  $("#btn1").click(function(){
     // var() 方法可以操作表单项的value属性值
     // 它可以设置和获取
     $(":text:enabled").val("我是万能的程序员");
  });
:disabled：匹配所有不可用元素

image.png

//2.对表单内 不可用input 赋值操作
    $("#btn2").click(function(){
      $(":text:disabled").val("管你可不可用，反正我是万能的程序员")
    });
:checked：匹配所有选中的单选、复选，和下拉列表中选中的option标签对象

image.png

//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
    $("#btn3").click(function(){
      alert($(":checkbox:checked").length);
    });

//4.获取多选框，每个选中的value值
				$("#btn4").click(function(){
					//1. 获取全部选中的复选框标签对象
					var $checkboies = $(":checkbox:checked");

					// // 老式遍历
					// for (var i = 0; i < $checkboies.length; i++) {
					// 	alert($checkboies[i].value);
					// }

					//each方法式jQuery对象提供用来遍历元素的方法
					//在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的DOM对象
					$checkboies.each(function () {
						alert(this.value);
					});
				});
:selected：匹配所有选中的option

image.png

//5.获取下拉框选中的内容  
    $("#btn5").click(function(){
      //1. 获取选中的option标签对象
      var $options = $("select option:selected");
      //2, 遍历获取到的option标签中的文本内容
      $options.each(function () {
        //在 each遍历的function中，有个this对象
        alert(this.value);
      });
    });
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				
				
		/**
		:input 		
		:text 		
		:password 	
		:radio 		
		:checkbox 	
		:submit 	
		:image 		
		:reset 		
		:button 	
		:file 		
		:hidden 	
		
		表单对象的属性
		:enabled 		
		:disabled 		
		:checked 		
		:selected 		
		*/
					
					
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					// var() 方法可以操作表单项的value属性值
					// 它可以设置和获取
					$(":text:enabled").val("我是万能的程序员");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("管你可不可用，反正我是万能的程序员")
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert($(":checkbox:checked").length);
				});
				//4.获取多选框，每个选中的value值
				$("#btn4").click(function(){
					//1. 获取全部选中的复选框标签对象
					var $checkboies = $(":checkbox:checked");

					// // 老式遍历
					// for (var i = 0; i < $checkboies.length; i++) {
					// 	alert($checkboies[i].value);
					// }

					//each方法式jQuery对象提供用来遍历元素的方法
					//在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的DOM对象
					$checkboies.each(function () {
						alert(this.value);
					});
				});
				//5.获取下拉框选中的内容  
				$("#btn5").click(function(){
					//1. 获取选中的option标签对象
					var $options = $("select option:selected");
					//2, 遍历获取到的option标签中的文本内容
					$options.each(function () {
						//在 each遍历的function中，有个this对象
						alert(this.value);
					});
				});
			})	
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button>


		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button>


         <button id="btn5">获取下拉框选中的内容.</button>


		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" style="height: 100px" id="sele1">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

jQuery元素筛选

  • 用法看文档：jQuery1.7

image.png
image.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>DOM查询</title>
    <style type="text/css">
      div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }

      div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }

      div.hide {
        display: none;
      }			
    </style>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        function anmateIt(){
          $("#mover").slideToggle("slow", anmateIt);
        }
        anmateIt();

        /**
					
	过滤
	eq(index|-index) 			
	first() 					
	last() 						
	hasClass(class) 			
	filter(expr|obj|ele|fn) 	
	is(expr|obj|ele|fn)1.6* 	
	has(expr|ele) 				
	not(expr|ele|fn) 			
	slice(start,[end]) 			
	
	查找
	children([expr]) 			
	closest(expr,[con]|obj|ele)1.6*   
	find(expr|obj|ele) 				
	next([expr]) 					
	nextall([expr]) 				
	nextUntil([exp|ele][,fil])1.6* 	
	parent([expr]) 					
	parents([expr]) 				
	parentsUntil([exp|ele][,fil])1.6*  
	prev([expr]) 					
	prevall([expr]) 				
	prevUntil([exp|ele][,fil])1.6* 	
	siblings([expr]) 				
	
	串联
	add(expr|ele|html|obj[,con]) 	
							
	
	*/

        //(1)eq()  选择索引值为等于 3 的 div 元素
        $("#btn1").click(function(){
          $("div").eq(3).css("background-color","#bfa");
        });
        //(2)first()选择第一个 div 元素
        $("#btn2").click(function(){
          //first()   选取第一个元素
          $("div").first().css("background-color","#bfa");
        });
        //(3)last()选择最后一个 div 元素
        $("#btn3").click(function(){
          //last()  选取最后一个元素
          $("div").last().css("background-color","#bfa");
        });
        //(4)filter()在div中选择索引为偶数的
        $("#btn4").click(function(){
          //filter()  过滤   传入的是选择器字符串
          $("div").filter(":even").css("background-color","#bfa");
        });
        //(5)is()判断#one是否为:empty或:parent
        //is用来检测jq对象是否符合指定的选择器
        $("#btn5").click(function(){
          alert($("#one").is(":empty"));
        });

        //(6)has()选择div中包含.mini的
        $("#btn6").click(function(){
          //has(selector)  选择器字符串    是否包含selector
          $("div").has(".mini").css("background-color","#bfa");
        });
        //(7)not()选择div中class不为one的
        $("#btn7").click(function(){
          //not(selector)  选择不是selector的元素
          $("div").not(".one").css("background-color","#bfa");
        });
        //(8)children()在body中选择所有class为one的div子元素
        $("#btn8").click(function(){
          //children()  选出所有的子元素
          $("body").children("div.one").css("background-color","#bfa");
        });


        //(9)find()在body中选择所有class为mini的div元素
        $("#btn9").click(function(){
          //find()  选出所有的后代元素
          $("body").find("div.mini").css("background-color","#bfa");
        });
        //(10)next() #one的下一个div
        $("#btn10").click(function(){
          //next()  选择下一个兄弟元素
        $("#one").next("div").css("background-color","#bfa");
        });
        //(11)nextAll() #one后面所有的span元素
        $("#btn11").click(function(){
        //nextAll()   选出后面所有的元素
        $("#one").nextAll("span").css("background-color","#bfa");
        });
        //(12)nextUntil() #one和span之间的元素
        $("#btn12").click(function(){
        //
        $("#one").nextUntil("span").css("background-color","#bfa")
        });
        //(13)parent() .mini的父元素
        $("#btn13").click(function(){
        $(".mini").parent().css("background-color","#bfa");
        });
        //(14)prev() #two的上一个div
        $("#btn14").click(function(){
        //prev()  
        $("#two").prev("div").css("background-color","#bfa")
        });
        //(15)prevAll() span前面所有的div
        $("#btn15").click(function(){
        //prevAll()   选出前面所有的元素
        $("span").prevAll("div").css("background-color","#bfa")
        });
        //(16)prevUntil() span向前直到#one的元素
        $("#btn16").click(function(){
        //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
        $("span").prevUntil("#one").css("background-color","#bfa")
        });
        //(17)siblings() #two的所有兄弟元素
        $("#btn17").click(function(){
        //siblings()    找到所有的兄弟元素，包括前面的和后面的
        $("#two").siblings().css("background-color","#bfa")
        });


        //(18)add()选择所有的 span 元素和id为two的元素
        $("#btn18").click(function(){

        $("span").add("#two").css("background-color","#bfa");
        });

        });


  	</script>
</head>
<body>		
      <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
      <input type="button" value="first()选择第一个 div 元素" id="btn2" />
      <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
      <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
      <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
      <input type="button" value="has()选择div中包含.mini的" id="btn6" />
      <input type="button" value="not()选择div中class不为one的" id="btn7" />
      <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
      <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
      <input type="button" value="next()#one的下一个div" id="btn10" />
      <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
      <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
      <input type="button" value="parent().mini的父元素" id="btn13" />
      <input type="button" value="prev()#two的上一个div" id="btn14" />
      <input type="button" value="prevAll()span前面所有的div" id="btn15" />
      <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
      <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
      <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
      
      
      <h3>基本选择器.</h3>
      


      文本框<input type="text" name="account" disabled="disabled" />
      <br><br>
      <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other"><b>class为mini,title为other</b></div>
      <div class="mini" title="test">class为mini,title为test</div>
      </div>
      
      <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
      </div>
      <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <span id="span1">^^span元素 111^^</span>
      <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span id="span2">^^span元素 222^^</span>
      <div id="mover">正在执行动画的div元素.</div>
</body>
</html>

jQuery的属性操作

image.png

html()

  • 它可以设置和获取起始标签和结束标签中的内容，跟DOM属性innerHTML一样

image.png

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //不传参数是获取，传递参数是设置
            // alert($("div").html());//获取
            // $("div").html("<h1>我是div中的标题一</h1>");//设置
        });

    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>

</body>
</html>

image.png
image.png

text()

  • 它可以设置和获取起始标签和结束标签中的文本，跟DOM属性innerText一样

image.png

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //不传参数是获取，传递参数是设置
            alert($("div").text());
            $("div").text("<h1>我是div中的标题一</h1>");
        });

    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>

</body>
</html>

image.png
image.png

val()

  • 它可以设置和获取表单项的value属性值，跟DOM属性value一样

image.png

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                // alert($("#username").val());//获取
                alert($("#username").val("超级程序员"));//设置
            });
        });
    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>

</body>
</html>

image.png
image.png

  • 注意：val()方法还可以同时设置多个表单项的选中状态
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            // // 批量操作单选
            // $(":radio").val(["radio2"]);
            //
            // // 批量操作筛选框的选中状态
            // $(":checkbox").val(["checkbox1", "checkbox2", "checkbox3"]);
            //
            // // 批量操作多选的下拉框选中状态
            // $("#multiple").val(["mul1", "mul2"]);
            //
            // //操作单选的下拉框选中状态
            // $("#single").val(["sin2"]);

            //
            $(":radio, :checkbox, #multiple, #single").val(["radio2", "checkbox1", "checkbox3", "mul1", "mul2", "sin1"]);

        });

    </script>
</head>
<body>

    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>
    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>

</body>
</html>

attr()

  • 可以设置和操作属性的值，不推荐操作checked、readOnly、selected、disabled等等
  • attr方法还可以操作非标准的属性，比如自定义属性：abc、bbj

image.png

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {

            //attr
            alert($(":checkbox:first").attr("name")); //获取
            alert($(":checkbox:first").attr("name", "abc")); //设置
        });

    </script>
</head>
<body>

    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    <div>1234</div>
    <div>1234</div>

</body>
</html>

image.png
image.png

prop()

  • 可以设置和获取属性的值，但只推荐操作checked、readOnly、selected、disabled等等

image.png

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {

            // alert($(":checkbox").attr("checked")); //官方觉得返回undefined是一个错误
            // alert($(":checkbox").prop("checked")); //false

            // $(":checkbox").prop("checked", true);
        });

    </script>
</head>
<body>

    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    <div>1234</div>
    <div>1234</div>

</body>
</html>

image.png

  • 由于官方认为返回undefined是一个错误，因此使用prop

image.png
image.png

DOM的增删改

内部插入

appendTo

:::tips
a.appendTo(b)
把a插入到b子元素末尾，成为最后一个子元素
:::

$("<h1>标题</h1>>").appendTo("div");

image.png

prependTo

:::tips
a.prependTo(b)
把a插到b所有子元素前面，成为第一个子元素
:::

$("<h1>标题</h1>>").prependTo("div");

image.png

外部插入

insertAfter()

:::tips
a.insertAfter(b)：得到ba
:::

$("<h1>标题1</h1>").insertAfter("div");

image.png

insertBefore()

:::tips
a.insertBefore(b)：得到ab
:::

$("<h1>标题1</h1>").insertBefore("div");

image.png

替换

replaceWith()

:::tips
a.replaceWith(b)：用b替换掉a
:::

$("div").replaceWith("<h1>标题1</h1>");

image.png

replaceAll()

:::tips
a.replaceAll(b)：用a替换掉所有的b
:::

$("<h1>标题1</h1>").replaceAll("div");

image.png

删除

remove()

:::tips
a.remove()：删除a标签
:::

$("div").remove();

image.png

empty()

:::tips
a.empty()：情况a标签里的内容
:::

$("div").empty();

image.png

  • div还在，但是内容没了

CSS样式操作

image.png

addClass()：添加样式

image.png

$('#btn01').click(function(){
    //addClass() - 向被选元素添加一个或多个类
    $divEle.addClass("redDiv blueBorder");
  });

removeClass()：删除样式

image.png

$('#btn02').click(function(){
    //removeClass() - 从被选元素删除一个或多个类 
    $divEle.removeClass("redDiv blueBorder");
  });

toggleClass()：有就删除，没有就添加样式

image.png

$('#btn03').click(function(){
    //toggleClass() - 对被选元素进行添加/删除类的切换操作 
    $divEle.toggleClass("redDiv");
  });

offset()：获取和设置元素的坐标

image.png

$('#btn04').click(function(){
    //offset() - 返回第一个匹配元素相对于文档的位置。
    var pos = $divEle.offset();
    // console.log(pos);

    $divEle.offset({
      top:100,
      left:50
    })
  });

全代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.whiteborder{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blueBorder{
		border: 5px blue solid;
	}
	
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass("redDiv blueBorder");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass("redDiv blueBorder");
		});
	
		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass("redDiv");
		});
		
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var pos = $divEle.offset();
			// console.log(pos);

			$divEle.offset({
				top:100,
				left:50
			})
		});
		
	
		
	})
</script>
</head>
<body>

	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	
 

	
	
 

	
</body>
</html>

jQuery动画

image.png

基本动画

show()：将隐藏的元素显示

image.png

//显示   show()
  $("#btn1").click(function(){
    $("#div1").show(2000, function () {
      alert("show动画完成")
    });
  });
hide()：将可见的元素隐藏

image.png

//隐藏  hide()
  $("#btn2").click(function(){
    $("#div1").hide(1000, function () {
      alert("hide动画完成")
    });
  });
toggle()：可见就隐藏，不可见

image.png

//切换   toggle()
  $("#btn3").click(function(){
    $("#div1").toggle(1000, function () {
      alert("toggle动画完成")
    });
  });

:::tips
以上的动画方法都可以添加参数：

  1. 第一个参数是动画执行的时长，以毫秒为单位
  2. 第二个参数是动画的回调函数（动画完成后自动调用的函数）
    :::

淡入淡出动画

fadeIn()：淡入（慢慢可见）

image.png

//淡入   fadeIn()
  $("#btn4").click(function(){
    $("#div1").fadeIn(2000, function () {
      alert("fadeIn完成")
    });
  });
fadeOut()：淡出（慢慢消失）

image.png

//淡出  fadeOut()
  $("#btn5").click(function(){
    $("#div1").fadeOut(2000);
  });
fadeTo()：在指定时长内慢慢的将透明度修改到指定的值。0透明，1完全可见，0.5半透明

image.png

//淡化到  fadeTo()
  $("#btn6").click(function(){
    $("#div1").fadeTo(2000, 0.5);
  });
fadeToggle()：淡入/淡出 切换

image.png

//淡化切换  fadeToggle()
  $("#btn7").click(function(){
    $("#div1").fadeToggle(100);
  });

全代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	
<script type="text/javascript">
	/* 	
		基本
		show([speed,[easing],[fn]]) 
		hide([speed,[easing],[fn]]) 
		toggle([speed],[easing],[fn]) 
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[spe],opa,[eas],[fn]]) 
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(2000, function () {
					alert("show动画完成")
				});
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000, function () {
					alert("hide动画完成")
				});
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000, function () {
					alert("toggle动画完成")
				});
			});

			// var abc = function () {
			// 	$("#div1").toggle(1000, abc);
			// }
			// abc();


			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(2000, function () {
					alert("fadeIn完成")
				});
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(2000);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(2000, 0.5);
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(100);
			});	
		})
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>

</html>

jQuery事件操作

$(function(){})和window.onload = function(){}的区别

image.png
:::tips

  • 他们分别是在什么时候触发？
  1. jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行【标签对象创建好了，就立马执行】
  2. 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成【标签对象创建好了，还要等内容记载完成，才会执行】
  • 他们触发的顺序
  1. jQuery页面加载完成之后先执行
  2. 原生js的页面加载完成之后
  • 他们执行的次数？
  1. 原生js的页面加载完成之后，只会执行最后一次的赋值函数
  2. jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行

image.png
:::

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	window.onload = function () {
		alert("原生js的页面加载完成之后1");
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后2");
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后3");
	}

	// $(document).ready(function () {
	//
	// });

	//jQuery的页面加载完成之后
	$(function () {
		alert("jQeuery的页面加载完成之后1");
	});
	$(function () {
		alert("jQeuery的页面加载完成之后2");
	});
	$(function () {
		alert("jQeuery的页面加载完成之后3");
	});

</script>
</head>
<body>
	<button>我是按钮</button>
	
	 <iframe src="http://www.baidu.com"></iframe>
	<img src="http://www.baidu.com/1.jpg" alt=""/>
</body>
</html>

jQuery中其他的事件处理方法

image.png

click()：它可以绑定单击事件，以及触发单击事件
$("h5").click(function () { //传function是绑定事件
	alert("h5单击事件");
});
mouseover()：鼠标移入事件
//鼠标移入
$("h5").mouseover(function () {
	console.log("鼠标移入");
});
mouseout()：鼠标移出事件
//鼠标移出
$("h5").mouseover(function () {
  console.log("鼠标移出");
});
bind()：可以给元素一次性绑定一个或多个事件
//使用bind绑定事件
$("h5").bind("click mouseover mouseout", function () {
  console.log("这个bind绑定的click和mouse事件")
});
one()：使用上跟bind一样，但是one方法绑定的事件只会响应一次
$("h5").one("click, mouseover", function () {
  console.log("这个bind绑定的click和mouse事件")
});
unbind()：跟bind方法相反的操作，解除事件的绑定
$("h5").bind("click mouseover mouseout", function () {
	console.log("这个bind绑定的click和mouse事件")
});

$("h5").unbind("click mouseover");
live()：也是用来绑定事件，它可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效
$("h5").live("click", function () { //传function是绑定事件
	alert("h5单击事件");
});

$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo($("#panel"));
全代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				// $("h5").click(function () { //传function是绑定事件
				// 	alert("h5单击事件");
				// });

				$("h5").live("click", function () { //传function是绑定事件
					alert("h5单击事件");
				});

				$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo($("#panel"));

				// $("button").click(function () {
				// 	$("h5").click(); //不传function是触发单击事件
				// });

				// //鼠标移入
				// $("h5").mouseover(function () {
				// 	console.log("鼠标移入");
				// });
				//
				//鼠标移出
				$("h5").mouseover(function () {
					console.log("鼠标移出");
				});

				使用bind绑定事件
				$("h5").bind("click mouseover mouseout", function () {
					console.log("这个bind绑定的click和mouse事件")
				});
				//
				$("h5").one("click, mouseover", function () {
					console.log("这个bind绑定的click和mouse事件")
				});
				//
				// $("h5").unbind("click mouseover");
			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
			<button>按钮</button>
		</div>
	</body>

</html>

事件的冒泡

:::tips
事件的冒泡是指，父子元素同时监听同一个事件：当触发子元素的事件的时候，同一个事件也被传递到了父元素的时间里去响应

  • 可以使用return false来阻止事件的冒泡传递
    :::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 13px;
				line-height: 130%;
				padding: 60px;
			}
			#content{
				width: 220px;
				border: 1px solid #0050D0;
				background: #96E555;
			}
			span{
				width: 200px;
				margin: 10px;
				background: #666666;
				cursor: pointer;
				color: white;
				display: block;
			}
			p{
				width: 200px;
				background: #888;
				color: white;
				height: 16px;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#content").click(function () {
					alert("我是div");
				});

				$("span").click(function () {
					alert("我是span");

					return false;
				});
			})
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.baidu.com">WWW.BAIDU.COM</a>
	</body>
</html>

JavaScript事件对象

:::tips
事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

  • **如何获取呢 javascript 事件对象呢？ **

**在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 **
这个 event 就是 javascript 传递参事件处理函数的事件对象
:::

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">

	//1.原生javascript获取 事件对象
	// window.onload = function () {
	// 	document.getElementById("areaDiv").onclick = function (event) {
	// 		console.log(event);
	// 	}
	// }

	//2.JQuery代码获取 事件对象
	$(function () {
		// $("#showMsg").click(function (event) {
		// 	console.log(event);
		// });


		//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
		$("#areaDiv").bind("mouseover mouseout", function (event) {
			// console.log(event);
			if (event.type == 'mouseover') {
				console.log("鼠标移入");
			} else if (event.type == 'mouseout') {
				console.log("鼠标移出");
			}
		})

	});

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

image.png
image.png
image.png
image.png

itzzan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery源代码
03-29
NULL 博文链接：https://liushuifeiyu.iteye.com/blog/1292289
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery源码分析之整体框架分析
xiaoliuhenshuai的专栏
09-03 130
      读一个开源框架，大家最想学到的就是设计的思想和实现的技巧。最近读jQuery源码，记下我对大师作品的理解和心得，跟大家分享，权当抛砖引玉。   先附上jQuery的代码结构。     (function(){ //jQuery变量定义 var jQuery = function(){...}; //jQuery原型定义(包含核心方法) ...
推荐开源项目：jQuery Bootstrap-style Dropdowns
gitblog_00017的博客
05-09 325
推荐开源项目：jQuery Bootstrap-style Dropdowns 项目地址:https://gitcode.com/soundasleep/jquery-dropdown 1、项目介绍 如果你在寻找一个优雅且易于使用的下拉菜单插件，那么jQuery Bootstrap-style Dropdowns是你的理想选择。这个开源项目由A Beautiful Site, LLC开发并维护，它...
浅谈js开源库jQuery
weixin_43741711的博客
12-09 666
文章目录0 前言1 jQuery 核心函数2 jQuery 对象和 dom 对象3 jQuery 选择器4 DOM 的增删改5 jQuery 的属性操作6 jQuery 事件操作7.封装ajax请求$.ajax 方法$.get 方法和 $.post 方法$.getJSON 方法 0 前言 jQuery是一款几乎被淘汰的js开源库，目前更多使用vue框架，新手不建议深入学习。 因为做的项目里有用到，这里总结一下jQuery的用法，之后会了解vue的用法。 jQuery的主要用途为：操作dom对象（增删改查）、
Jquery开源代码
weixin_45176859的博客
06-03 175
为了支持支持IE8。使用版本：3.0.0-alpha1 可读版本 实际使用的脚本
推荐开源项目：jQuery Lint —— 让你的jQuery代码更严谨
gitblog_00029的博客
05-10 319
推荐开源项目：jQuery Lint —— 让你的jQuery代码更严谨 项目地址:https://gitcode.com/padolsey-archive/jquery.lint--old 项目介绍 在JavaScript开发中，尤其是在使用jQuery库时，有时候我们会遇到一些不易察觉的错误或不良实践。为此，资深开发者James Padolsey贡献了一款非常有用的工具——jQuery Lin...
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
推荐开源项目：Bloody jQuery Plugins — 功能强大的jQuery扩展库
最新发布
gitblog_00024的博客
05-24 228
推荐开源项目：Bloody jQuery Plugins — 功能强大的jQuery扩展库 项目地址:https://gitcode.com/phiggins42/bloody-jquery-plugins 在这个Web开发领域日新月异的时代，一款高效且实用的JavaScript工具库能极大地提升开发效率。今天，我们向您推荐一个名为Bloody jQuery Plugins的开源项目，它是一系列针...
推荐一款优秀开源项目：jQuery Widget
gitblog_00008的博客
03-10 359
推荐一款优秀开源项目：jQuery Widget 如果你正在寻找一个轻量级、易于使用的JavaScript库来创建交互式的网页元素，那么jQuery Widget是一个不错的选择。 jQuery Widget是什么？ jQuery Widget是一款基于jQuery的插件，它提供了一种简单的方法来创建可复用的UI组件。该插件提供了一系列实用的功能，包括事件处理、选项设置、方法调用等，使开发者能够快...
jQuery 基础
qq_36194388的博客
07-28 156
官方介绍：jQuery is a fast, small, and feature-rich JavaScript library. jQuery是一个开源的产品，任何人都可以自由的使用，jQuery强调的理念是写的少，做的多(write less, do more)，其独特的选择器、链式DOM操作方式、事件绑定机制、出色的浏览器兼容性、封装完善的Ajax都是其它JavaScript库望尘莫及的，是继prototype之后又一个优秀的Javascript框架 (框架指已经封装好的，据有一定结构和功...
开源库类 jQuery
weixin_44762420的博客
03-30 288
1，jQuery简介： jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities jQuery知识点： html:裸体的人 css:穿了衣服...
jquery项目实战_我做了一个开源项目，本着帮助他人的目的
weixin_39615984的博客
11-28 547
不要努力成为一个成功的人，而要成为一个有价值的人。 —— 爱因斯坦1.每次全栈做项目的时候，往往前端最费时间，对于一个注重用户体验的人来说，一个按钮的颜色、大小或是布局，就要纠结好久。犹记得，因为画不好一个首页，导致项目迟迟不想往下走的扎心，直到发现了 bootstrap …前端的知识点并不复杂，但在样式这块总也学不好，并非不会写 CSS，而是做出来的东西，总是差点意思，渐渐也失去了信心，认为自己...
JQuery实现小项目
xyk：的博客
05-25 2298
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。拥有便捷的插件扩展机制和丰富的插件。总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API。想下载的看下我的码云~~
开源类库-JQuary
DoWhatYouSay的博客
05-14 327
《HTML5基础知识、核心技术与前沿科技》一书中提到HTML5的开源类库JQuary,看过之后略微总结一下：JQuary能够是我们方便的操作html的节点、对象、时间、动画，其用法比原生的javascript更加简单。JQuary类库就是一个集成js文件，是一套简洁快速灵活的javascript脚本库，其中已经设计好了相应的方法，只需要引入并应用即可，相当于Java中的jar包，集成了开发人员所需...
从无到有写一个jQuery开源插件
three_bird的博客
05-03 1870
v1.0故事发展 女：来给我拍照给我拍照 男：已经拍了很多了 女：来，给我看看拍的怎么样 女：这张不错，樱花飘落的这种感觉好好哦，可惜樱花在照片上不动，不然会更美。 男：你用美图秀秀不就行了嘛。 女：美图秀秀？咦，对了，你不是做网站开发的吗，你帮我把这图片用网站做成花一直在那飘的效果呗？ ... 男陷入了沉默，似乎明白了刚才不该提那个建议 华丽的分割线 对，故事中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itzzan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值