jQuery

jQuery——jQuery基本概念 文章目录jQuery基本概念为什么要学习jQuery?jQuery初体验什么是jQuery?jQuery的版本jQuery的入口函数jQuery对象与DOM对象的区别(重点)DOM对象转换成jQuery对象:jQuery对象转换成DOM对象:练习:隔行变色案例 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javascript开发过程中,有许多的缺点 阅读详情

1、jQuery介绍

什么是jQuery?

jQuery,就是JavaScript和查询(Query),是辅助JavaScript开发的js类库。

jQuery核心思想!!!

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

jQuery好处!!!

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


2、jQuery简单使用

1)使用$()代替window.onload

2)使用选择器获取dom对象,随后进行绑定,注意要使用 #

举例代码如下:

<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.οnlοad=function (){
			var btnobj=document.getElementById("btnId");
			btnobj.οnclick=function (){	// 动态绑定
				alert(btnobj.innerText);
			}
		}*/

		//方式二:
		$(function (){ //表示页面加载完成,相当于window.οnlοad=function (){}
			var $btnobj = $("#btnId"); //表示按id查询标签对象,注意要加#号
			$btnobj.click(function () { //绑定单击事件
				alert("jQuery的单击事件");
			});
		});

		/*//使用$()代替window.onload
		$(function(){
			//使用选择器获取按钮对象,随后绑定单击响应函数
			$("#btnId").click(function(){
				//弹出Hello
				alert('Hello');
			});
		});*/
		
	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

3)常见的问题:

① 使用jQuery一定要引入jQuery库吗?

是的

② jQuery中的$是什么?

是一个函数

③ 怎么为按钮添加点击响应函数的?

1.使用jQuery查询到标签对象
2.使用标签对象.click(function(){});


3、jQuery核心函数

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

1)传入参数为函数时:$(function (){};

表示页面加载完成之后。相当于window.onload=function(){}
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//传入参数为[函数]时:在文档加载完成后执行这个函数
	$(function (){
        alert("页面加载完成");
	};
</script>

2)传入参数为HTML字符串时:

会创建这个html标签对象(元素结点对象)
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

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

3)传入参数为选择器字符串时:

根据这个字符串查找元素节点对象
$("#(id属性值)");		id选择器,根据id查询标签对象
$("标签名");				标签名选择器,根据标签名查询标签对象
$(".class属性值");		类型选择器,可以根据class属性查询标签对象
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

    //核心函数的4个作用
    //传入参数为[函数]时:在文档加载完成后执行这个函数
    $(function (){
        alert("页面加载完成");
        //传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象
         $("<div>\n" +
            "    <span>div-span1</span>\n" +
            "    <span>div-span2</span>\n" +
            "</div>").appendTo("body");

        //传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象
        alert($("button").length);
        //传入参数为[DOM对象]时:将DOM对象包装为jQuery对象返回
    });

</script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>

4)传入参数为DOM对象时:

会把DOM包装为jQuery对象返回
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

    //核心函数的4个作用
    //传入参数为[函数]时:在文档加载完成后执行这个函数
    $(function (){
        alert("页面加载完成");
        //传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象
         $("<div>\n" +
            "    <span>div-span1</span>\n" +
            "    <span>div-span2</span>\n" +
            "</div>").appendTo("body");

        //传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象
        alert($("button").length);
        //传入参数为[DOM对象]时:将DOM对象包装为jQuery对象返回
        var btnobj=document.getElementById("btn01");
        alert($(btnobj));
    });

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


4、jQuery对象和DOM对象区别

4.1 什么是jQuery对象,什么是DOM对象

DOM对象:

① 通过getElementById()查询出来的标签对象是Dom对象

② 通过getElementsByName()查询出来的标签对象是Dom对象

③ 通过getElementsByTagName()查询出来的标签对象是Dom对象

④ 通过createElement()方法创建的对象,是Dom对象


jQuery对象

① 通过jQuery提供的API创建的对象,是jQuery对象

alert($("<h1></h1>"));

② 通过jQuery包装的Dom对象,也是jQuery对象

var btnobj =document.getElementById("btn01");
alert($(btnobj));

③ 通过jQuery提供的API查询到的对象,是jQuery对象

alert($("#btn01"));   //根据button标签的id="#btn01"查询
alert($("button"));   //根据button标签查询

4.2 jQuery对象的本质是什么?

jQuery对象是Dom对象组成的数组 + jQuery提供的一系列功能函数。

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

	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";

		var arr=[12,"abc",true];

		var $btns=$("button");

		for (var i=0;i<$btns.length;i++){
			alert($btns[i]);  //[object HTMLButtonElement]
		}
	});
</script>

4.3 jQuery对象和Dom对象使用的区别

jQuery对象不能使用DOM对象的属性和方法;DOM对象也不能使用jQuery对象的属性和方法。

4.4 jQuery对象和Dom对象相互转换

1)dom对象转换为jQuery对象(重点)

① 先得到DOM对象
② $(DOM对象) 	就可以转换为jQuery对象

2)jQuery对象转为dom对象(重点)

① 先有jQuery对象
② jQuery对象[下标]	取出相应的DOM对象

在这里插入图片描述

alert($(document.getElementById("testDiv"))[0]);


5、jQuery选择器(重点)

5.1 基本选择器(重点)

在这里插入图片描述

<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">

			//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				$(function (){
					$("#btn1").click(function (){
						//css()方法可以设置获取样式
						$("#one").css("background-color","#bbffaa");
					});

					//2.选择 class 为 mini 的所有元素
					//css()方法可以设置获取样式
					$("#btn2").click(function (){
						$(".mini").css("background-color","#bbffaa");
					});

					//3.选择 元素名是 div 的所有元素
					$(function () {
						$("#btn3").click(function () {
							//css()方法可以设置获取样式
							$("div").css("background-color", "#bbffaa");
						});
					});

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

					//5.选择所有的 span 元素和id为two的元素 ---用到组合选择器
					$(function () {
						$("#btn5").click(function () {
							$("#two,span").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>

5.2 层级选择器(重点)

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

需求:找到表单(from)中所有的 input 元素

HTML 代码:
<form>								//祖先元素
  <label>Name:</label>
  <input name="name" />				//后代元素
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />	//后代元素
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]

② parent > child- - -在给定的父元素下匹配所有的子元素(直接的父子关系-不涉及跨代)

需求:匹配表单中所有的子级input元素。

HTML 代码:
<form>								//父元素
  <label>Name:</label>
  <input name="name" />				//子元素
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />  //孙子元素
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form > input")

结果:
[ <input name="name" /> ]

③ prev + next- - -匹配所有紧接在 prev 元素后的 next 元素 (next,一个有效选择器并且紧接着第一个选择器也要是同级)

需求:匹配所有跟在 label 后面的 input 元素

HTML 代码:
<form>
  <label>Name:</label>				//第一个prev元素
  <input name="name" />				//第一个next元素
  <fieldset>
      <label>Newsletter:</label>	//第二个prev元素
      <input name="newsletter" />	//第二个next元素
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("label + input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]

④ prev ~ siblings- - -匹配 prev 元素之后的所有 siblings 元素 (siblings一个选择器,并且它作为第一个选择器的同级)

需求:找到所有与表单(from)同辈的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form ~ input")

结果:
[ <input name="none" /> ]

5.3 过滤选择器

1)基本过滤器:
在这里插入图片描述

<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>
		<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>

2) 内容过滤选择器

① :contains(text)		匹配包含给定文本的元素,其中text是一个用于查找的字符串
② :empty				匹配所有不包含子元素或者文本的空元素
③ :has(selector)		匹配含有选择器所匹配的元素的元素,其中Selector是一个用于筛选的选择器
④ :parent				匹配含有子元素或者文本的元素
		<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.选择 含有文本 '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>

3) 可见性过滤选择器

① :hidden- - -匹配所有不可见元素,或者type为hidden的元素

需求1:查找隐藏的 tr

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr> //style="display:none"表示隐藏
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:hidden")

结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]

需求2:匹配type为hidden的元素

HTML 代码:
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery 代码:
$("input:hidden")

结果:
[ <input type="hidden" name="id" /> ]

② :visible- - -匹配所有的可见元素

需求:查找所有可见的 tr 元素

HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:visible")

结果:
[ <tr><td>Value 2</td></tr> ]

4) 属性过滤选择器(^、$与正则表达式中含义相同)
在这里插入图片描述

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">	
	$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {  //与3不同,3中属性值不为title的也会被选中
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
	});
</script>

5) 表单和表单对象属性过滤选择器(只对表单form进行操作)

表单:
	:input 			//匹配所有 input, textarea, select 和 button 元素
	:text 			//匹配所有的单行文本框
	:password 		//匹配所有密码框
	:radio 			//匹配所有单选按钮
	:checkbox 		//匹配所有复选框
	:submit 		//匹配所有提交按钮
	:image 			//匹配所有图像域
	:reset 			//匹配所有重置按钮
	:button 		//匹配所有按钮
	:file 			//匹配所有文件域
	:hidden 		//匹配所有不可见元素,或者type为hidden的元素
	
表单对象的属性
	:enabled 		//匹配所有可用元素
	:disabled 		//匹配所有不可用元素
	:checked 		//匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
	:selected 		//匹配所有选中的option元素
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">	
		$(function(){
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					//val可以操作表单项的value属性值
					//可以设置和获取
					$(":text:enabled").val("Good");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("VeryGood");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function(){
					alert($(":checkbox:checked").length);
				});
				//4.获取多选框,每个选中的value值
				$("#btn4").click(function(){

					//1、获取全部选中的复选框标签对象
					var $checkboies=$(":checkbox:checked");
					//遍历方式一:
					/*//2、遍历获取dom对象并输出其value值
					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(){
					var $checkedSelected=$("select option:selected");
					$checkedSelected.each(function (){
						alert(this.value);
					})
				});
	});
</script>


6、jQuery元素筛选- - 有过滤、查找、串联

在这里插入图片描述
在这里插入图片描述

<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();

	
				//(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("div").css("background-color","#bfa")
				});
							
				//(18)add()选择所有的 span 元素和id为two的元素
				$("#btn18").click(function(){
	
					//   $("span,#two,.mini,#one")
					$("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>
		<br /><br />
		文本框<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>


7、jQuery的属性操作

1)属性

① attr(name|properties|key,value|fn) 设置或返回被选元素的属性值 - - -不推荐checked、readOnly、selected、disabled

参数name描述:
jQuery 代码:
$("img").attr("src");

参数properties 描述:
为所有图像设置src和alt属性。
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:
为所有图像设置src属性。
jQuery 代码:
$("img").attr("src","test.jpg");

参数key,回调函数 描述:
把src属性的值设置为title属性的值。
jQuery 代码:
$("img").attr("title", function() { return this.src });

② removeAttr(name) 从每一个匹配的元素中删除一个属性

描述:
将文档中图像的src属性删除

HTML 代码:
<img src="test.jpg"/>

jQuery 代码:
$("img").removeAttr("src");

结果:
[ <img /> ]

③ prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值 - - -只推荐checked、readOnly、selected、disabled 与attr()互补

参数name 描述:
选中复选框为true,没选中为false
jQuery 代码:
$("input[type='checkbox']").prop("checked");

参数properties 描述:
禁用页面上的所有复选框。
jQuery 代码:
$("input[type='checkbox']").prop({
disabled: true
});

参数key,value 描述:
禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});

④ removeProp(name) 用来删除由.prop()方法设置的属性集

描述:
设置一个段落数字属性,然后将其删除。

HTML 代码:
<p> </p>

jQuery 代码:
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

结果:
The secret luggage code is: 1234. Now the secret luggage code is: undefined. 

2)CSS类

① addClass(class|fn),为每个匹配的元素添加指定的类名 - - - 一个或多个要添加到元素中的CSS类名,使用空格分开

向被选元素添加一个或多个类

为匹配的元素加上 'selected' 类

jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

回调函数 描述:
给li加上不同的class
HTML 代码:
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>

jQuery 代码:
$('ul li:last').addClass(function() {
	return 'item-' + $(this).index();
});

② removeClass(class|fn),从所有匹配的元素中删除全部或者指定的类

从被选元素删除一个或多个类

参数class 描述:
从匹配的元素中删除 'selected' 类
jQuery 代码:
$("p").removeClass("selected");

参数class 描述:
删除匹配元素的所有类
jQuery 代码:
$("p").removeClass();

回调函数描述:
删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
	return $(this).prev().attr('class');
});

③ toggleClass(class|fn[,sw]),如果存在(不存在)就删除(添加)一个类

对被选元素进行添加/删除类的切换操作

参数class 描述:
为匹配的元素切换 'selected' 类
jQuery 代码:
$("p").toggleClass("selected");

参数class,switch 描述:
每点击三下加上一次 'highlight' 类

HTML 代码:
<strong>jQuery 代码:</strong>

jQuery 代码:
var count = 0;
$("p").click(function(){
  $(this).toggleClass("highlight", count++ % 3 == 0);
});

回调函数 描述:
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
	if ($(this).parent().is('.bar') {
		return 'happy';
 	 } else {
 		return 'sad';
  	}
});

④ offset(),获取匹配元素在当前视口的相对偏移

返回第一个匹配元素相对于文档的位置

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	text-align: center;
}

a {
	color: #04D;
	text-decoration: none;
}

a:hover {
	color: #F50;
	text-decoration: underline;
}

.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

.SubCategoryBox ul {
	list-style: none;
}

.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}

.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		//基本初始状态
		$("li:gt(5):not(:last)").hide();
		//给功能按钮绑定单击事件
		$("div div a").click(function (){
			//让某些品牌显示或消失
			$("li:gt(5):not(:last)").toggle();

			//判断品牌,当前是否可见
			if ($("li:gt(5):not(:last)").is(":hidden")){
				//品牌隐藏的状态:1 显示全部品牌   --角标向下
				$("div div a span").text("显示全部品牌");

				$("div div ").removeClass();
				$("div div").addClass("showmore");

				//去高亮
				$("li:contains('明基')").removeClass("promoted")


			}else {

				//品牌显示的状态:2 显示精简品牌   --角标向上
				$("div div a span").text("显示精简品牌");

				$("div div ").removeClass();
				$("div div").addClass("showless");
				//加高亮
				$("li:contains('明基')").addClass("promoted")

			}

			return false;
		});

	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

3)HTML代码/文本/值

① html([val|fn]),取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

  • 跟dom属性innerHTML一样

注意:

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。

无参数 描述:
返回p元素的内容。
jQuery 代码:
$('p').html();

参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");

回调函数描述:
使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){
	return "这个 p 元素的 index 是:" + n;
});

② text([val|fn]),取得所有匹配元素的内容,结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

  • 跟dom属性innerText一样

如下:

无参数 描述:
返回p元素的文本内容。
jQuery 代码:
$('p').text();

参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");

回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
 return "这个 p 元素的 index 是:" + n;
});

③ val([val|fn|arr]),获得表单匹配元素的当前值

  • 跟dom属性value一样

如下:

无参数 描述:
获取文本框中的值
jQuery 代码:
$("input").val();

参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");

回调函数 描述:
设定文本框的值
jQuery 代码:
$('input:text.items').val(function() {
	return this.value + ' ' + this.className;
});

举例代码如下(全选、全不选):

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

	$(function(){
		//全选
		$("#checkedAllBtn").click(function (){
			$(":checkbox").prop("checked",true);
		});

		//全不选
		$("#checkedNoBtn").click(function (){
			$(":checkbox").prop("checked",false);
		});

		//反选
		$("#checkedRevBtn").click(function (){
			$(":checkbox[name='items']").prop("checked",function (){/*alert(this.checked);*/ return !this.checked});
			//上面的this为第二个function中通过":checkbox[name='items']"获取的集合的每一个元素

			//之后要检查是否满选,获取全部球类个数,与选中球类个数对比
			var allCounts =$(":checkbox[name='items']").length;
			var selectCounts =$(":checkbox[name='items']:checked").length;
			/*if (allCounts==selectCounts){
				$("#checkedAllBox").prop("checked",true);
			}else {
				$("#checkedAllBox").prop("checked",false);
			}*/
			$("#checkedAllBox").prop("checked",allCounts==selectCounts);
		});

		//提交
		$("#sendBtn").click(function (){
			//获取选中的球类的复选框
			$(":checkbox[name='items']:checked").each(function (){
				alert(this.value);
			});
		});

		//给[全选/全不选]绑定单击事件
		$("#checkedAllBox").click(function (){
			//在事件的function函数中,有一个this对象,这个this对象使当前正在响应事件的dom对象
			// this.checked;  this是id为checkedAllBox的单选框
			//alert(this.checked);
			$(":checkbox[name='items']").prop("checked",this.checked);
		});

		//给全部球类绑定单击事件
		$(":checkbox[name='items']").click(function (){

			//之后要检查是否满选,获取全部球类个数,与选中球类个数对比
			var allCounts =$(":checkbox[name='items']").length;
			var selectCounts =$(":checkbox[name='items']:checked").length;
			/*if (allCounts==selectCounts){
				$("#checkedAllBox").prop("checked",true);
			}else {
				$("#checkedAllBox").prop("checked",false);
			}*/
			$("#checkedAllBox").prop("checked",allCounts==selectCounts);

		});

	});

</script>

	<form method="post" action="">
	
		你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全 选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反 选" />
		<input type="button" id="sendBtn" value="提 交" />
	</form>

</body>


8、DOM的增删改

1)内部插入 (嵌套-父子关系)

在这里插入图片描述
总结:prepend与prependTo同样

① append()a是被插入的对象,b是要在对象内插入的元素内容。

② appendTo()a是要插入的元素内容,而b是被插入的对象。


2)外部插入 (同级-兄弟关系)after、before与内部插入的道理相同
在这里插入图片描述
3)替换
在这里插入图片描述
4)删除
在这里插入图片描述

实现代码如下:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>DOM增删改</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
/**
文档处理
内部插入

appendTo(content) 	   a.appendTo(b);  把a加到b里面				  添加到最后面
prependTo(content)	   a.prependTo(b); 把a添加到b里面    			  添加到最前面

外部插入
insertAfter(content) 	a.insertAfter(b);  把a插入到b的后面
insertBefore(content) 	a.insertBefore(b); 把a插入到b的前面


替换
replaceWith(content|fn) a.replaceWith(b)  把a用b替换
replaceAll(selector) 	a.replaceAll(b)	  用a替换所有的b

删除
empty() 				a.empty()   把a掏空,把a里面的所有元素都删除
remove([expr]) 			a.remove(b)  所有的a,是b的话就会删除	a.remove()删除a		



*/
			$(function(){
			
				
				$("#btn01").click(function(){
					//创建一个"广州"节点,添加到#city下[appendTo()]
					//子节点.appendTo(父节点)

					$("<li>广州</li>").appendTo("#city");
					//$("#city").append("<li>广州</li>");  效果相同

				});


				$("#btn02").click(function(){
					//创建一个"广州"节点,添加到#city下[prependTo()]

					$("<li>广州</li>").prependTo("#city");
					//$("#city").prepend("<li>广州</li>");	效果相同

				});
				
				
				
				$("#btn03").click(function(){
					//将"广州"节点插入到#bj前面[insertBefore()]
					//前边.insertBefore(后边的)
					$("<li>广州</li>").insertBefore("#bj");
					//$("#bj").before("<li>广州</li>");		效果相同

				});
				
				
				$("#btn04").click(function(){
					//将"广州"节点插入到#bj后面[insertAfter()]
					//后边.insertAfter(前边的)
					$("<li>广州</li>").insertAfter("#bj");
					//$("#bj").after("<li>广州</li>");		效果相同
					
				});
				
				$("#btn05").click(function(){
					//使用"广州"节点替换#bj节点[replaceWith()]
					//被替换的.replaceWith()
					$("#bj").replaceWith($("<li>广州</li>"));
					//$("#bj").replaceWith("<li>广州</li>);   效果相同

					
				});
				
				$("#btn06").click(function(){
					//使用"广州"节点替换#bj节点[replaceAll()]
					//新的节点.replaceAll(旧的节点)

					$("<li>广州</li>").replaceAll("#bj");

				});
				
				$("#btn07").click(function(){
					//删除#rl节点[remove()]
					//$("ul").remove("#rl");
					//$("#rl").remove();

					$("ul").remove("#rl");
					$("#rl").remove();
				});
				
				$("#btn08").click(function(){
					//掏空#city节点[empty()]
				
					$("#city").empty();
				});
				
				$("#btn09").click(function(){
					//读取#city内的HTML代码

					//jQuery对象的html输出,无参是读取,有参是设置
					alert($("#city").html());

					//dom对象的innerHTML输出,先通过jQuery对象遍历出dom对象,再取每个dom对象的innerHTML
					$("#city").each(function (){alert(this.innerHTML)});
				});
				
				$("#btn10").click(function(){
					//设置#bj内的HTML代码
					$("#bj").html("北京欢迎您!");
					
				});

			});
				
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
			<div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
			<div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
			<div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
			<div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
			<div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
			<div><button id="btn07">删除#rl节点[remove()]</button></div>
			<div><button id="btn08">掏空#city节点[empty()]</button></div>
			<div><button id="btn09">读取#city内的HTML代码</button></div>
			<div><button id="btn10">设置#bj内的HTML代码</button></div>
			
		</div>
	</body>
</html>

9、练习

练习题1:左到右、右到左

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		//页面加载完成之后
		$(function (){
			//绑定第一个按钮,选中添加到右边
			$("button:eq(0)").click(function (){
				$("[name=sel01] option:selected").appendTo($("[name=sel02]"));
			});

			//绑定第二个按钮,选中添加全部到右边
			$("button:eq(1)").click(function (){
				$("[name=sel01] option").appendTo($("[name=sel02]"));
			});

			//绑定第三个按钮,选中添加全部到右边
			$("button:eq(2)").click(function (){
				$("[name=sel02] option:selected").appendTo($("[name=sel01]"));
			});
			//绑定第四个按钮,选中添加全部到右边
			$("button:eq(3)").click(function (){
				$("[name=sel02] option").appendTo($("[name=sel01]"));
			});
		});
		
	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>

练习题2:添加删除记录

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

		$(function (){

			//创建一个用于复用的删除的function函数
			var deleteFun=function (){

				//在事件响应的function函数中,this对象是当前
				//							正在响应事件的dom对象
				//取到此当前a标签的行
				var $trObj=$(this).parent().parent();

				var name=$trObj.find("td:first").text();
				/*
				* confirm是js语言提供的一个确认提示框函数,提供什么就提示什么
				* 当用户点击确定返回true,点击取消返回false
				* */
				if (confirm("确定要删除["+name+"]吗?")){
					$trObj.remove();
				}
				return false;  //可以阻止元素的默认行为

			};

			//添加操作
			$("#addEmpButton").click(function (){
				//获取输入框姓名、邮箱、工资的内容
				var name =$("#empName").val();
				var email =$("#email").val();
				var salary =$("#salary").val();


				//创建一个行标签对象,添加到显示数据的表格中
				var $trObj=$("<tr>" +
						"<td>" + name + "</td>" +
						"<td>" + email + "</td>" +
						"<td>" + salary + "</td>" +
						"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
						"</tr>");

				$trObj.appendTo("#employeeTable ")

				//给添加的行的a标签绑上事件
				$trObj.find("a").click(deleteFun);

			});

			//删除操作
			//给删除的a标签绑定单击事件
			$("a").click(deleteFun);

		});

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>

	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>


10、jQuery动画

在这里插入图片描述

<script type="text/javascript">

		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000,function (){
					alert("show动画完成");
				});
			});

			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(2000);
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000);
			});

			/*//故可以实现一直动画
			var fun=function (){
				$("#div1").toggle(1000,fun);
			};
			fun();*/
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(1000,function (){
					alert("fadeIn完成")
				});
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(1000);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(1000,0.5,function (){
					alert("0.5的透明的已完成")
				});
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(1000);
			});	
		})
</script>


11、jQuery事件操作

1、$(function(){});和window.onload的区别?

①:

window.onload会在整个页面加载完毕之后调用

$(function(){});会在当前文档加载完毕之后调用

//1、导入jquery的.js文件
//2、可以在导入文件后的任意位置
//   1)、可以写在head里面,如果写在head里面可能导致元素查找不到等问题
//			1-1、只需要把代码写在$(function(){ jquery代码  })
//   2)、可以写在head之后的任意位置,我们一般不采用这种写法。
//	 3)、综合以上考虑,1-1
//3、window.onload & $(function(){})
//window.onload只可以使用一次,且执行最后一次的赋值函数。
//$(function(){})可以使用多次

② 它们分别在什么时候触发?

1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。

2、原生js的页面加载完成之后,除了要等浏览器的内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成。

③ 它们触发的顺序?

1、jQuery页面加载完成之后先执行

2、原生js的页面加载完成之后


2、jQuery中其他的事件处理方法:

在这里插入图片描述

<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单击事件 == click方法绑定')
				 });*/

				// 使用live绑定的单击事件
				$("h5").live("click",function () {
					alert('h5单击事件 == live方法绑定');
				});

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

				// $("button").click(function () {
				// 	$("h5").click(); // 不传function是触发事件
				// });
				//鼠标移入
				// $("h5").mouseover(function () {
				// 	console.log("你进来了")
				// });
				// //鼠标移出
				// $("h5").mouseout(function () {
				// 	console.log("你出去了")
				// });

				// 使用bind绑定事件
				// $("h5").bind("click mouseover mouseout",function () {
				// 	console.log("这是bind绑定的事件");
				// });

				// $("h5").one("click mouseover mouseout",function () {
				// 	console.log("这是one绑定的事件");
				// });

				// $("h5").unbind();


			});
		
		</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>

3、事件的冒泡:

什么是事件的冒泡?

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

如何阻止事件的冒泡?

在子元素事件函数体内,return false; 就可以阻止冒泡传递。

		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//冒泡就是事件的向上传导,子元素的事件被触发,父元素的响应事件也会触发
				//解决冒泡问题:return false;
				
				//给span绑定一个单击响应函数
				$("span").click(function(){
					alert("我是span的单击响应函数");
					return false; //阻止冒泡问题
				});
				
				//给id为content的div绑定一个单击响应函数
				$("#content").click(function(){
					alert("我是div的单击响应函数");
					return false;
				});
				
				//给body绑定一个单击响应函数
				$("body").click(function(){
					//alert("我是body的单击响应函数");
				});
				
				//取消默认行为
				/* $("a").click(function(){
					return false;
				}) */
				
			})
		</script>

4、javaScript事件对象:

事件对象,是封装有触发的事件信息的一个javascript对象。

4.1 如何获取JavaScript事件对象?

在给元素绑定事件的时候,在事件的function(event)参数列表中添加一个参数,这个参数名,我们习惯取名为event。

比如:
	① 原生javascript绑定获取事件对象
	② jQuery代码绑定获取事件对象
	③ 使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件?
<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 () {
		 	$("#areaDiv").click(function (event) {
		 	console.log(event);
		 });
		
		//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
		$("#areaDiv").bind("mouseover mouseout",function (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>

4.2 运用javascript对象练习 - -图片跟随?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		text-align: center;
	}
	#small {
		margin-top: 150px;
	}
	#showBig {
		position: absolute;
		display: none;
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#small").bind("mouseover mouseout mousemove",function (event){
			if (event.type=="mouseover"){
				$("#showBig").show();
			}else if (event.type=="mouseout"){
				$("#showBig").hide();
			}else if (event.type=="mousemove"){
				$("#showBig").offset({		//设置坐标
					left: event.pageX+20,
					top:event.pageY+20
				});
			}
		});
	});
</script>
</head>
<body>

	<img id="small" src="img/small.jpg" />
	
	<div id="showBig">
		<img src="img/big.jpg">
	</div>

</body>
</html>


12、书城项目第一阶段:表单验证

验证用户名:必须由字母,数字下划线组成,并且长度5-12位

验证密码:必须由字母,数字下划线组成,并且长度5-12位

验证确认密码:与密码相同

邮箱验证:xxxxx@xxx.com

验证码:现在只需要验证用户已输入,应为还没讲到服务器,验证码生成。

<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
	<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			//页面加载完成之后
			$(function (){
				//给注册提交绑定单击事件
				$("#sub_btn").click(function (){
					//1、获取用户名输入框里的内容
					var usernameText = $("#username").val();
					//2、创建正则表达式对象
					var usernamePatt=/^\w{5,12}$/;
					//3、使用test方法验证
					if (!usernamePatt.test(usernameText)){
						//4、提示用户结果
						$("span.errorMsg").text("用户名不合法!");
						return false;
					}

					//1、获取用户名输入框里的内容
					var passwordText = $("#password").val();
					//2、创建正则表达式对象
					var passwordPatt=/^\w{5,12}$/;
					//3、使用test方法验证
					if (!passwordPatt.test(passwordText)){
						//4、提示用户结果
						$("span.errorMsg").text("密码不合法!");
						return false;
					}


					//1、获取用户名输入框里的内容
					var repwdText = $("#repwd").val();
					//3、使用test方法验证
					if (passwordText != repwdText){
						//4、提示用户结果
						$("span.errorMsg").text("确认密码和密码不一致!");
						return false;
					}


					//1、获取用户名输入框里的内容
					var emailText = $("#email").val();
					//2、创建正则表达式对象
					var emailPatt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
					//3、使用test方法验证
					if (!emailPatt.test(emailText)){
						//4、提示用户结果
						$("span.errorMsg").text("邮箱格式不合法!");
						return false;
					}

					//验证码
					var codeText = $("#code").val();

					//去掉验证码前后空格
					codeText=$.trim(codeText);

					if (codeText==null || codeText==""){
						$("span.errorMsg").text("验证码错误!")
					}

					$("span.errorMsg").text("");

				});
			});

		</script>
<style type="text/css">
	.login_form{
		height:420px;
		margin-top: 25px;
	}
	
</style>
</head>
<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
		</div>
		
			<div class="login_banner">
			
				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>
				
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册尚硅谷会员</h1>
								<span class="errorMsg"></span>
							</div>
							<div class="form">
								<form action="regist_success.html">
									<label>用户名称:</label>
									<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
									<br />
									<br />
									<label>用户密码:</label>
									<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
									<br />
									<br />
									<label>确认密码:</label>
									<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<br />
									<br />
									<label>电子邮件:</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
									<br />
									<br />
									<label>验证码:</label>
									<input class="itxt" type="text" style="width: 150px;" id="code"/>
									<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">									
									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" />
									
								</form>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
VMware如何安装img镜像,VMware如何安装openwrt软路由(含相关工具镜像) 阅读详情

相关推荐

Verilog基础知识11(异步FIFO为什么使用格雷码(gray-code) )

需求说明:Verilog设计 内容       :第一部分 异步FIFO为什么使用格雷码                   第二部分 格雷码在异步FIFO中的使用 来自       :时间的诗 第一部分 异步FIFO为什么使用格雷码 原文:http://www.cnblogs.com/kxk_kxk/p/3931591.html 异步FIFO通

时间的诗 8888

jquery如何遍历多个li标签,获得它的内容

在index.html文件内,创建eachLi()函数,在函数内,定义一个空数组arr,用于保存遍历到的li标签内容。

reg183的专栏 876

【SLAM】SVO2.0编译运行和论文代码解读

SVO2是我遇到的最难编译的代码了,可能公开版本不能放太鲁棒的代码吧,搞了快一个星期,终于跑起来了。

iwanderu的博客 5971

HTML知识点

HTML 基本语法、属性、事件、另加HTTP知识点 什么是HTML HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面

果果_aily 496

PointMLP实战:5分钟用PyTorch搭建点云分类模型(附GitHub代码)

本文提供了基于ICLR 2022论文PointMLP的点云分类模型实战教程。通过PyTorch框架,详细介绍了从环境搭建、数据预处理、模型架构解析到训练推理的全流程,并分享了性能调优技巧。该模型利用残差MLP模块构建,结构清晰高效,适合开发者快速上手并应用于实际点云处理项目。

r2s3t4的博客 214

百度网盘开放平台OAuth 2.0授权全流程解析

本文详细解析了百度网盘开放平台OAuth 2.0授权全流程,包括创建应用、获取凭证、授权码模式详解以及access_token的使用与刷新。通过实际案例和代码示例,帮助开发者快速掌握接口调用技巧,避免常见错误,确保安全高效地接入百度网盘API。

wind6的博客 1264

jQuery获取h1-h6元素的值

1、问题背景 查找到h1-h6,并遍历它们,打印出内容 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;查找标题&lt;/title&gt; &lt;script type="text/javascript

牛栏山矿泉水 783

从5V降到3.3V,你的LDO到底有多烫?手把手算功耗、选散热,避开这些坑

本文详细解析了LDO在5V转3.3V电路中的发热问题,提供了精确的功耗计算公式和散热设计方法。通过对比不同封装的热阻参数和优化PCB布局,帮助工程师有效降低LDO温度,避免热保护触发。文章还探讨了替代方案的技术拐点,为电源系统优化设计提供实用指导。

weixin_30304375的博客 433

JQuery中的基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器 筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头。我们通过一个列表,来看看基本筛选器的描述注意: eq(), :lt(), :gt(), :even, :odd

LHJBK的博客 4313

11-16 Fluent结果查看及后处理功能(做动画、监控点)

监控点、面及动画操作

zheaa的博客 1万+

基于Simulink的双PMSM差速驱动转矩同步控制建模示例

本文详细介绍了基于Simulink的双永磁同步电机(PMSM)差速驱动转矩同步控制建模方法。针对AGV/叉车等双电机独立驱动系统的转矩不同步问题,提出主从式+交叉耦合控制策略,在Simulink中实现直线行驶、90°转弯和单轮打滑恢复三种工况的仿真验证。通过动力学建模、参数差异设置、同步误差定义及控制律设计,最终实现同步误差<3%、转弯半径跟踪误差<5%、打滑后100ms内恢复的性能指标。文章特别强调了实际工程中的参数标定、通信同步和故障处理要点,并提供了完整的Simulink建模步骤和工具箱使

xiaoheshang_123的博客 203

Jquery总结 $("h3 a", patch);

$("h3 a", patch);简单讲,是 $('#parentID').find('childNode') 的偷懒写法 $("h3 a", patch) 等于 patch.find('h3 a')$("h3 a",$(this)) 等于 $(this).find('h3 a') 直接用 find 会快些,因为偷懒的写法最终还是调用 find 转载于:https://www.cnb...

weixin_30824277的博客 220

yolov8 PTQ和QAT量化实战(源码详解)

量化():是指将高精度浮点数(FP32)转换为低精度(8bit或4bit)整数的过程,它是模型部署中的一种非常重要的优化方法,可以在较少的精度损失下,大幅提供神经网络的效率和性能。目前主流的神经网络量化方式有PTQ和QATPTQ是训练后量化(),无需数据集和训练,直接量化模型权重QAT是量化感知训练(),量化后需要在数据集上继续微调训练。QAT过程中,我们首先需要选择哪些层需要进行finetune训练,并利用FP32对应层的输出作为监督进行训练。

@bangbang的博客 5326

JS和jQuery的区别(超级详细)

jquery和js的区别是什么? 一、首先来看一下jQuery和js的概念 jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。 js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。 所以,最本质的区别就是js是一种语言,而jQuery是基于该语言的一种框架。除却最本质的区别还有一些用法上的差别。 ...

岛田悠米 5620

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

JQuery笔记

JQuery简介 一。JQUERY学习重点: 1.熟练背诵JQUERY[选择器和过滤器]语法 2.熟练掌握【JQUERY对象】提供【功能函数】 二。jquery学习方式 1.一天理论介绍 2.分段提供jquery练习内容 三。JQUERY技术介绍: 1.就是JavaScript的封装版 2.简化JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤 四。JQUERY使用: 1.下载jquery工具文件,并导入到工程中. 2.将jquery文

Li某人_初学者 2069

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

jQuery——jQuery学习笔记(完整版)

本文主要介绍有关jQuery的相关知识点

Bonsoir777的博客 1799

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

jquery-cropper:终极jQuery图像裁剪插件完整指南

jquery-cropper是一款基于Cropper.js的jQuery图像裁剪插件,它为网页开发者提供了简单而强大的图像裁剪解决方案。无论是头像上传、照片编辑还是图片处理,这款插件都能帮助你轻松实现专业级的图像裁剪功能。 ## 为什么选择jquery-cropper? 在众多图像裁剪工具中,jquery-cropper脱颖而出的原因有以下几点: - **简单易用**:作为jQuery插件,

gitblog_00114的博客 1118

jQuery.Turbolinks与其他jQuery插件的兼容性测试:哪些插件可以完美配合

想要在Turbolinks项目中实现无缝的页面切换体验吗?jQuery.Turbolinks插件正是解决jQuery事件绑定问题的终极方案!这个简单的jQuery插件能够修复由Turbolinks引起的绑定事件问题,让您的jQuery代码在Turbolinks环境下正常工作。但对于许多开发者来说,最关心的问题是:jQuery.Turbolinks究竟能与哪些jQuery插件完美配合使用? ##

gitblog_00022的博客 993

jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery

jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制

weixin_70320000的博客 3734

jquery

jquery 1. jquery 它是一个js库,类似于package,经常被引用。 中文文档:http://jquery.cuishifeng.cn/ 1.1. 引用方法 常在网页源码文件引用: <script src="{{url_for('static',filename='js/jquery-3.3.1.min.js')}}">&l...

akuibpt23191的博客 251

JQuery校验

JQUERY校验: 1、

抽象的类 517

JS与JQuery区别

JS和JQUERY的区别 ①.根据ID取元素 { JS:取到的是一个DOM对象。   例:var div = document.getElementByID(“one”); JQUERY:取到的是一个JQUERY对象。   例:var div = $("#one");——括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入井号,...

zhangankang的博客 174

jquery 的模块化

最近在威客上接了个任务,想起来还是觉得对不住那位雇主。我就一半路学PHP打酱油的,全自学,也就只做过一个完整的小网站。这个任务网站完全是东拼西凑弄的。自己看着那些前台后台的代码都不想看第二次。 入正题吧,我以前的JS代码都是使用JQUERY,也是没有什么章法,就是一个 $('#aa').click(){ } 随便放在一个地方都运行就行。我看那个PINPHP的JUQERY代码就感觉很好,虽然很多代

cxmove的专栏 2058

【jQuery】jQuery概述及jQuery的原理_01

jQuery是一款优秀的JavaScript库,jQuery设计者的宗旨是“write less,do more”,即少写代码,多做事。那在使用jQuery完成比较复杂的页面开发时,可以快速的获取DOM元素,并且快速的修改DOM元素的样式,这比使用原生的JS简单多了,而且jQuery还提供了一些实现动画及特效的函数,可以快速实现复杂的用户交互效果,用起来是很爽的!.........

青春木鱼的博客 1635

jQuery解析xml的两种方法

第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 var returnDataXml = parseXML(returnData); var param = $(returnDataXml).find("param"); for(i=0;i<param .length;i++){ var paramName = $(param[i]).attr("name"); var rDescription = $(param[i]).

图图小淘气的博客 2351

jquery监听input值变化_jQuery入门教程-Jquery实战讲解

不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源本套视频共计时长四小时三十二分钟,循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了大量的案例。jQuery详细学习教程来啦 _jQuery_Jquery教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com看完视频想要资料的小伙伴 速速保存:网盘链接:https://...

weixin_39866874的博客 171
上一篇: JavaScript
下一篇: XML--
AX_Chu
博客等级 码龄6年 13粉丝 31原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值