天天看点
返回

Web前端复习-11、jQuery基础

Web前端复习-11、jQuery基础

1、jQuery概述

  • JavaScript语言作为Web前端语言发展过程中的一个重要里程碑
  • 随着浏览器种类的推陈出新，JavaScript对浏览器的兼容性受到了极大挑战
  • 2006年1月，美国John Resing创建了一个基于JavaScript的开源框架——jQuery
  • jQuery具有代码高效、浏览器兼容性更好等特征，极大地简化了对DOM对象、事件处理、动画效果以及AJAX等操作

1.1 jQuery优势

  1. 访问和操作DOM元素：jQuery中封装了大量的DOM操作，可以非常方便地获取或修改页面中的某个元素，包含元素的移动、复制、删除等操作
  2. 强大的选择器：jQuery允许开发人员使用CSS 1~CSS 3所有的选择器，方便快捷地控制元素的CSS样式，并很好地兼容各种浏览器
  3. 可靠的事件处理机制：使用jQuery将表现层与功能相分离，可靠的事件处理机制让开发者更多专注于程序的逻辑设计；在预留退路（graceful degradation）、循序渐进以及非入侵式（unobtrusive）方面，jQuery表现的非常优秀
  4. 完善的Ajax操作：Ajax异步交互技术极大方便了程序的开发，提高了浏览者的体验度；在jQuery库中将Ajax操作封装到一个函数 $.ajax() 中，开发者只需专心实现业务逻辑处理，而无需关注浏览器的兼容性问题
  5. 链式操作方式：在某一个对象上产生一系列动作时，jQuery允许在现有对象上连续多次操作，链式操作是jQuery的特色之一
  6. 完善的文档：jQuery是一个开源产品，提供了丰富的文档

1.2 搭建jQuery开发环境

  • 在jQuery的官方网站http://jquery.com/，下载最新的jQuery库
  • 在下载界面可以直接下载jQuery 1.x和jQuery 2.x两种版本
  • jQuery 1.x版本在原来的基础上继续对IE 6、7、8版本的浏览器进行支持；jQuery 2.x不再支持IE 8及更早版本
    Web前端复习-11、jQuery基础
  • 每个版本又分为以下两种：开发版（Development version）和生产版（Production version）
    Web前端复习-11、jQuery基础
    Web前端复习-11、jQuery基础
  • 在页面中使用jQuery分为两步：（1）引入jQuery库，（2）使用jQuery实现界面操作。

    1. 引入jQuery库

      jQuery不需要安装，只需将下载的jQuery库放到站点的一个公共目录中，然后在页面中通过

      <script />

       标签引入即可。

    2. jQuery简单测试

      在页面中引入jQuery库后，通过

      $()

       函数来获取页面中的元素，并对元素进行定位或效果处理。在没有特别说明下，

      $

       符号即为jQuery对象的缩写形式，例如：

      $(“myDiv”)

       与

      jQuery(“myDiv”)

       完全等价。

window.onload与$(document).ready()区别

Web前端复习-11、jQuery基础

1.3 DOM对象和jQuery对象

  • 在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取页面中的HTML元素

    【示例】获取DOM对象

var menuDiv = document.getElementById("menuDiv");
var baseSpan = menuDiv.getElementsByClassName("baseClass");
var span = document.querySelector("#menuDiv");
  • jQuery对象是指通过jQuery库中提供的方法来获取的元素对象
  • jQuery对象本身不能直接调用DOM对象的方法，需要将其转换成DOM对象后再调用DOM对象的方法
1.3.1 DOM对象转成jQuery对象

使用jQuery库中的

$()

方法将DOM对象封装起来，并返回一个jQuery对象

//获得DOM对象
var domObject=document.getElementById("myDiv");
//获得DOM对象中的innerHTML属性值
alert(domObject.innerHTML);
//将DOM对象转换成jQuery对象
var jQueryObject=$(domObject);
//调用jQuery对象的html()方法
alert(jQueryObject.html());
1.3.2 jQuery对象转成DOM对象

将jQuery对象转换成DOM对象时，可以把jQuery对象看作一个数组，通过索引 [index] 或 get(index)方法来获得DOM对象。

//获取jQuery对象(由页面中所有的DIV构成)
var jQueryObject = $("div");
//1.通过下标获取DOM对象
var domObject1 = jQueryObject[0];
//2.通过get()方法获取DOM对象
var domObject2=jQueryObject.get(1);
//获得DOM对象中的innerHTML属性值
alert("第一个DIV内容是："+domObject1.innerHTML
	+"\n第二个DIV内容是："+domObject2.innerHTML);

2、jQuery选择器

  • 通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，而无需担心浏览器的兼容性问题
  • jQuery选择器完全继承了CSS选择器的风格，将jQuery选择器分为四类：
    1. 基本选择器
    2. 层次选择器
    3. 过滤选择器
    4. 表单选择器

2.1基本选择器

基本选择器是jQuery中最常用的选择器，通过元素的id、className或tagName来查找页面中的元素。

Web前端复习-11、jQuery基础

由于ID是元素的唯一标识、不能重复，所以ID选择器返回单个jQuery对象；而class属性用于设定元素的样式，允许多个元素使用同一样式，所以class选择器返回一个jQuery对象类型的数组。

<div id="idDiv">DOM对象与jQuery对象的相互转化</div>
	<div class="classDiv">jQuery对象不能直接使用DOM对象的方法，</div>
	<div class="classDiv">但可以通过将jQuery对象转换成DOM对象后再调用其方法。</div>
	<span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
	<script type="text/javascript">
		$(function(){
			$("#idDiv").css("color","blue");
			$(".classDiv").css("background-color","#ddd");
			$("span").css("background-color","gray").css("color","white");
			$("*").css("font-size","20px");
			$("#idDiv,.classSpan").css("font-style","italic");
		})
	</script>
Web前端复习-11、jQuery基础

2.2层次选择器

  • jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素，如同辈元素、后代元素、子元素和相邻元素等
  • 层次选择器的用法与基本选择器相似，也是使用$()函数来实现，返回结果均为jQuery对象数组
    Web前端复习-11、jQuery基础

  • $("prev+next")

     用于选取紧随prev元素之后的next元素，且prev元素和next元素有共同的父元素，功能与 $(“prev”).next(“next”) 相同。

  • $("prev~siblings")

     用于选取选prev元素之后的siblings元素，两者有共同的父元素而不必紧邻，功能与 $(“prev”).nextAll(“siblings”) 相同。 
<div>
    搜索条件<input name="search" />
    <form>
	<label>用户名:</label><input name="useName" />
	<fieldset><label>密　码:</label><input name="password" /></fieldset>
    </form>
	身份证号：<input name="none" /><br/>
	联系电话：<input name="none" />
</div>
<script type="text/javascript">
   $(function(e){
		$("form input").css("width","200px")
		$("form > input").css("background","pink");
		$("label + input").css("border-color","blue");
		//$("label").next("input").css("border-color","blue");
		$("form ~ input").css("border-bottom-width","4px");
		//$("form").nextAll("input").css("border-bottom-width","4px");
		$("*").css("padding-top","3px");
   });
</script>
Web前端复习-11、jQuery基础

2.3过滤选择器

过滤选择器：要根据特定的过滤规则来筛选出所需要的页面元素

  • 简单过滤选择器
  • 内容过滤选择器
  • 可见性过滤选择器
  • 属性过滤选择器
  • 子元素过滤选择器
  • 表单对象属性过滤选择器
2.3.1 简单过滤选择器
Web前端复习-11、jQuery基础
<table>
        <tr><td>商品名</td><td>商品价格</td><td>商品数量</td></tr>
        <tr><td>海俪恩太阳眼镜</td><td>299</td><td>50</td></tr>
        <tr><td>田玉平安扣</td><td>1280</td><td>30</td></tr>
        <tr><td>汤美男士皮带</td><td>198</td><td>36</td></tr>
        <tr><td>上海故事围巾</td><td>159</td><td>67</td></tr>
        <tr><td>布奴迈基滑雪服</td><td>1298</td><td>10</td></tr>
        <tr><td>YIBOYO发饰</td><td>89</td><td>100</td></tr>
        <tr><td colspan="3">共计6种商品</td></tr>
 </table>
<script type="text/javascript">
	$(function(e){
		$("table tr:first").css("background-color","gray");
		$("table tr:last").css("text-align","right");
		$("table tr:eq(2)").css("color","red");
		$("table tr:lt(1)").css("font-weight","bold");
		$("table tr:odd").css("background-color","#dddddd");
		$(":root").css("background-color","#EFEFEF");
		$("table tr:not(:first)").css("font-size","11pt");
	});
</script>
Web前端复习-11、jQuery基础
2.3.2 内容过滤选择器

内容过滤选择器是指根据元素的文字内容或所包含的子元素的特征进行过滤的选择器。

Web前端复习-11、jQuery基础
<table>
       <tr><td>商品名</td><td>商品价格</td><td>商品数量</td></tr>
        <tr><td class="myClass">海俪恩太阳眼镜</td><td>299</td><td>50</td></tr>
        <tr><td>田玉平安扣</td><td>1280</td><td>30</td></tr>
        <tr><td>汤美男士皮带</td><td><span>198</span></td><td>36</td></tr>
        <tr><td>POLISI滑雪眼镜</td><td>149</td><td></td></tr>
        <tr><td>布奴迈基滑雪服</td><td>1298</td><td></td></tr>
        <tr><td >YIBOYO发饰</td><td><span>89</span></td><td></td></tr>
        <tr><td colspan="3">共计6种商品</td></tr>
 </table>
<script type="text/javascript">
	 $(function(e){
		$("td:contains('滑雪')").css("font-weight","bold");
		$("td:parent").css("background-color","#dddddd");
		$("td:empty").css("background-color","white");
		$("td:has('span')").css("background-color","gray")
		//$("td").has('span').css("background-color","gray")
	 });
</script>
Web前端复习-11、jQuery基础
2.3.3 可见性过滤选择器

可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

Web前端复习-11、jQuery基础
  • :hidden选择器用于选取所有不可见元素，包括

    <input type="hidden" />

     、

    <div style="display:none;">

     等形式的不可见元素。
  • 而visibility:hidden和opacity:0修饰的元素在页面中占据一定的物理空间，所以都被视为可见的。 
<div id="topDiv">页面顶部</div>
<div id="menuDiv" style="display:none;">菜单栏</div>
<div id="mainDiv" style="height:60px;">
              用户ID:<input type="hidden" value="用户ID" /><br/>
     用户名：<input type="text" name="userName" value="请输入用户名" />
</div>
<img src="images/showHidden.jpg" width="120" id="showHidden"  onClick="showHiddenElement()"/>
<script type="text/javascript">
     $(function(e){
	$("div:visible").css("background-color","#dddddd");
	$("input:visible").css("border","2px solid blue");
	$(":visible").css("font-size","18px");
     });
     function showHiddenElement(){
          $("div:hidden").show(1000);
          $("input:hidden").attr("type","text");
     }
</script>
Web前端复习-11、jQuery基础
Web前端复习-11、jQuery基础
2.3.4 属性过滤选择器

属性过滤选择器是指根据元素的属性来筛选元素的选择器，在属性匹配时以“[”号开始、以“]”号结束。

Web前端复习-11、jQuery基础
<div id="topDiv" title="top" desc="页面顶部">页面顶部</div>
<div id="menuDiv" title="menu">菜单栏</div>
<div id="mainDiv" >主题区</div>
<div id="leftDiv" title="mainLeft">左侧栏</div>
<div id="rightDiv" title="mainRight">右侧栏</div>
<div id="bottomDiv" title="bottom" desc="页面底部">底部栏</div>
<div id="advDiv" title="advbottom">广告栏</div>
<script type="text/javascript">
   $(function(e){
      $("div[title]").css({width:"300px",height:"30px",margin:"3px"});
      $("div[title=menu]").css("border","2px solid #AAA");
      $("div[title!=menu]").css({backgroundColor:"#DDD"});
      $("div[title^=main]").css("margin-left","20px");
      $("div[title$=bottom]").css("padding-left","15px");
      $("div[title*=o]").css("font-style","italic");
      $("div[title*=o][desc]").css("font-weight","bold");
   });
</script>
Web前端复习-11、jQuery基础

注意：

css()方法用于设置元素的样式，在设置单个样式时格式如下：css(“font-style”,“italic”);当同时进行设置多个样式时，需要用到properties格式（键值对）的数据作为参数，例如：

css( {fontStyle:“italic”,fontWeight:“bold”} )

当font-style属性在jQuery中出现时，应写成fontStyle格式，其他样式属性以此类推。

2.3.5 子元素过滤选择器

通过子元素过滤选择器可以轻松地选取所有父元素中的指定元素

Web前端复习-11、jQuery基础
<script type="text/javascript">
$(function(e){
   $("#dataTable tr td:first-child").css("background-color","#CCC");
   $("#dataTable tr td:last-child").css("background-color","#AAA");
   $("#dataTable tr td:only-child").css("border","2px solid #666");
   $("#dataTable tr td:nth-child(even)")
	.css({fontStyle:"italic",fontWeight:"bold"});
   //从第2个开始，每隔3个选取一个
   //$("#dataTable td:nth-child(3n+2)").css("background-color","#AAA");
   $("li:first-child").css("background-color","#CCC");	//无效果
   $("li:last-child").css("background-color","#DDD");		//无效果	
   $("li:nth-child(odd)").css({fontStyle:"italic",fontWeight:"bold"});
   $("li:first-of-type").css({backgroundColor:"#DDD",color:"blue"});
   $("li:last-of-type").css({backgroundColor:"#DDD",color:"red"});
   //first-of-type、last-of-type、only-of-type均起作用，后面设置覆盖前面的设置
   $("li:only-of-type").css("color","green");
});
</script>
Web前端复习-11、jQuery基础
2.3.6 表单对象属性过滤选择器

表单对象属性过滤选择器是指通过表单对象的属性特征进行筛选的选择器

Web前端复习-11、jQuery基础
<script type="text/javascript">
$(function(e){
   //设置复选框以外的input样式
   $("input:not([type='checkbox'])")		.css({marginTop:"3px",width:"200px"});
   $("#myform input:disabled")
	.css({backgroundColor:"#CCC",borderColor:"#999"});
   $("#myform input:enabled").css({color:"#f66"});
   var goodsType=$("#myform input:checked");
   var province=$("#myform option:selected").text();
   $("#result").html("销售区域："+province+"<br/>销售类型有："	 	+goodsType.length+"个");
   });
</script>
Web前端复习-11、jQuery基础
  • text() 方法用于设置或显示元素的文本内容
  • html() 方法用于设置或显示元素的HTML内容
  • length属性表示所选取的元素集合的数量

2.4 表单选择器

  • 表单在Web前端开发中占据重要的地位
  • jQuery中引入的表单选择器能够让用户更加方便地处理表单数据
    Web前端复习-11、jQuery基础
$(function(e){
	var result="统计结果如下：<hr/>";
	result+="<br />&lt;input&gt;标签的数量为："+$(":input").length;
	result+="<br />单行文本框的数量为："+$(":text").length;
	result+="<br />密码框的数量为："+$(":password").length;
	result+="<br />单选按钮的数量为："+$(":radio").length;
	result+="<br />上传文本域的数量为："+$(":file").length;
	result+="<br />复选框的数量为："+$(":checkbox").length;
	result+="<br />图片按钮的数量为："+$(":image").length;
	result+="<br />提交按钮的数量为："+$(":submit").length;
	result+="<br />普通按钮的数量为："+$(":button").length;
	$("#showResult").html(result);
});
Web前端复习-11、jQuery基础

3、jQuery基本操作

通过jQuery提供的选择器快速定位到页面的每个元素后，对元素可以进行各种操作

  • 属性操作
  • 样式操作
  • 内容操作
    Web前端复习-11、jQuery基础
    当元素属性（如checked、selected、disabled等）取值为true或false时，通过prop()方法对属性进行操作，而其他普通属性通过attr()方法对进行操作。

3.1 属性操作

3.1.1 attr()方法

attr()方法用于获取所匹配元素的集合中第一个元素的属性，或设置所匹配元素的一个或多个属性。

attr(name)
attr(properties)
attr(key,value)
attr(key,function(index, oldAttr))
           
$("img").attr("src")              //用于返回<img>集合中第一个图像的src属性值
$("#myImage").attr("src")		//返回ID为myImage图像的src属性值
$("#myImage").attr("src","images/flower2.png") //设置myImage的src属性

//通过properties(名/值对)的方式，设置图像的属性
$("#myImage").attr({src:"images/flower2.png",title:"鲜花之王-玫瑰花"});
//使用函数的返回值作为属性值
$("#myImage").attr("title", function(){ return this.src });
3.1.2 removeAttr()方法

removeAttr()方法用于删除匹配元素的指定属性。

3.1.3 prop()方法
  • prop()方法用于获取匹所配元素的集合中第一个元素的属性，或设置所匹配元素的一个或多个属性
  • prop()方法多用于boolean类型属性操作，例如checked、selected和disabled等 
prop(name)
prop(properties)
prop(key,value)
prop(key,function(index, oldAttr))
           
$("input[type='checkbox']").prop("checked")	//返回第一个复选框的状态
$("input[type='checkbox']").prop("checked",true);	//将所有复选框选中

//通过properties(名/值对)的方式，将所有复选框设为禁用、选中状态
$("input[type='checkbox']").prop({disabled: true,checked:true});
//使用函数的返回值作为属性值，对所有复选框进行反选
$("input[type='checkbox']").prop("checked",
	function(index,oldValue) { return !oldValue; }
);
3.1.4 removeProp()方法

removeProp()方法用于删除由prop()方法设置的属性集。

var flowerSrc= $("#flower1").attr("src");
$("#flower1").attr("src",function(){ return $("#flower2").attr("src")});
$("#flower2").attr("src",flowerSrc);
$("input[type='checkbox']").prop("checked",true);
$("input[type='checkbox']").prop("checked",
	function(index, oldValue){return !oldValue;});
$("input[type='checkbox']").prop({checked: true,:disabled true});
$("input[type='checkbox']").removeProp("disabled");
Web前端复习-11、jQuery基础

3.2 样式操作

  • 在HTML代码中，通过class属性指定HTML标签的样式名；
  • 在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。 
$("#myDiv").attr("class")		  //返回myDiv的class属性值 
$("#myDiv").attr("class","newClass")//设置myDiv的class属性值，如果存在则替换
  • jQuery还提供了addClass()、removeClass() 和 toggleClass() 方法，实现对页面元素的样式追加、移除和替换等操作。
3.2.1 addClass()方法

addClass()方法用于对一个或多个匹配元素追加样式

addClass(className)
addClass(className1 className2.. classNameN)
addClass(function(index, oldClassName))
  • 参数className1 className2… classNameN表示可以同时追加多个样式，样式名之间使用空格隔开
  • 参数function(index, oldClassName)表示使用函数的返回值作为当前位置的样式；index表示当前元素在集合中的索引值，oldClassName表示当前元素在修改之前的样式名 
//追加baseClass样式
$("p[title='desc']").addClass("baseClass");
//追加baseClass和fontColor样式
$("p[title='desc']").addClass("baseClass fontColor");
3.2.2 removeClass()方法

removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式。

removeClass()
removeClass(className)
removeClass(className1 className2.. classNameN)
  • 无参方法用于移除匹配元素的所有样式
  • 参数className表示需要移除的样式名
  • 参数className1 className2… classNameN表示可以同时移除多个样式，样式名之间使用空格隔开 
$("p").removeClass();                     //移除所有的样式
$("p").removeClass("baseClass");          //移除baseClass样式
$("p").removeClass("baseClass fontColor");//移除baseClass和fontColor样式

addClass()和removeClass()方法的使用：

<script type="text/javascript">
$(function(e){
	$("#articleTitle").addClass("titleClass");                        //添加某种样式
	$("p[title='desc']").addClass("baseClass fontColor");  //添加多种样式

	//根据位置的不同，添加不同的样式，index为索引	$("p[title='desc']").addClass(function(inde) {
		console.log(index);
		return 'p'+index;
	});
});
function removeClass(){
	//$("p").removeClass("fontSize");//移除指定的样式
	$("p").removeClass();//移除所有的样式
}
</script>
Web前端复习-11、jQuery基础
3.2.3 toggleClass()方法

该方法用于元素样式之间的重复切换，当元素的指定样式存在则将该样式进行移除，否则添加该样式。

toggleClass(className)
toggleClass(className, switch)
  • 参数switch表示切换样式开关，默认为true；当switch为true时允许样式切换，否则不切换 
//ID为userName的元素添加样式，如果存在foucsClass样式则移除，没有则添加该样式
$("#userName").toggleClass("focusClass");
//第二个参数为真，样式切换为inverseColor 
$("#saleDept").toggleClass("inverseColor", true);
3.2.4 css()方法

在jQuery 1.9+中新增了css()方法，用于返回第一个匹配元素的CSS样式，或设置所有匹配元素的样式。

css(attrName)
css(key,value)
css(properties)
           
//一个参数时，用于返回第一个匹配元素的样式；例如：返回第一幅图片的宽度
$("img").css("width");
//多个参数时，用于设置匹配元素的样式；例如：设置图片的宽度为200像素
$("img").css("width","200px");
//使用properties（键值对）的方式一次设置多个样式
$("img").css({backgroundColor:"#CCC",borderColor:"#999"});
//使用函数的返回值作为css()方法的value值
$("img").css({
	width:function(index, value){
		return parseFloat(value)*0.9;
	}
});

使用toggleClass()和css()方法切换元素的样式：

function userNameOnFocus(){
         $("#userName").toggleClass("focusClass");
}
function changeDept(){
         $("#saleDept").toggleClass("inverseColor", ++count%3==0);
}
//图片放大
function enlargeImage(){
         $("img").css({
	width:function(index, value){
	         return parseFloat(value)*1.1;
	},
	height:function(index, value){
	         return parseFloat(value)*1.1;
	}
         });
}
Web前端复习-11、jQuery基础

3.3 内容操作

  • html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。
  • 上述方法的使用方式基本相同，当方法没有提供参数时表示获取匹配元素的内容或值；当方法携带参数时表示对匹配元素的内容或值进行修改。
3.3.1 html()方法
  • html()方法用于获取第一个匹配元素的HTML内容或修改匹配元素的HTML内容，此方法仅对XHTML文档有效，不能用于XML文档。 
html()
html(htmlCode)
html(function(index, oldHtmlCode))
  • 参数htmlCode表示将所匹配元素的HTML内容设置为htmlCode
  • 参数function(index,oldHtmlCode)表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前元素在修改之前的HTML内容

html()方法的使用：

//返回#mainContentDiv标签的HTML内容
$("#mainContentDiv").html();
//设置#mainContentDiv标签的HTML内容为红色标题格式的“漫步时尚广场”
$("#mainContentDiv").html("<h1><font color='red'>漫步时尚广场</font><h1/>");
//根据元素在集合中的位置不同，设定不同的HTML内容
$("p").html(function(index,htmlCode){
         switch(index){
	case 0 : return "<h1>"+htmlCode+"<h1/>";
	case 1 : return "<h2>"+htmlCode+"<h2/>";
         }
});
3.3.2 text()方法

text()方法用于读取或设置匹配元素的文本内容；与html()方法区别在于，text()方法返回纯文本内容，能够适用于XHTML和XML文档。

text()
text(textContent)
text(function(index, oldTextContent))
  • 参数textContent表示将匹配元素的文本内容设置为textContent
  • 参数function(index,oldTextContent)表示将函数的返回值作为当前元素的文本内容，index表示当前元素在集合中的索引位置，oldTextContent表示当前元素在修改之前的文本内容

text()方法的使用：

//返回#mainContentDiv标签的文本内容，即使该标签包含HTML标签，返回的内容仅仅是纯文本内容
$("#mainContentDiv").text();
//设置#mainContentDiv标签的文本内容为“漫步时尚广场”
$("#newsDiscuss").text("<hr/>评论如下："+$("#inputDiscuss").val()+"<hr/>");

使用html()和text()方法修改页面的内容：

console.log("<div>中的HTML内容如下："+$("#newsContent").html());
console.log("<div>中的text内容如下："+$("#newsContent").text());
function changeContent(){
  $("p").html(function(index,htmlCode){
	switch(index){
		case 0 :  return "<h1>"+htmlCode+"<h1/>";
		case 1 :  return "<h2>"+htmlCode+"<h2/>";
	}
  });
}
Web前端复习-11、jQuery基础
3.3.3 val()方法

val()方法用于设置或获取表单元素的值，包括文本框、下列列表、单选框和复选框等元素；当元素允许多选时，返回一个包含被选项的数组。

val()
val(newValue)
val(arrayValue)
val(function(index, oldValue))
  • 参数newValue表示将匹配的表单元素的value值设置为newValue
  • 参数arrayValue用于设置多选表单元素（如check和select等）的选中状态
  • 参数function(index,oldValue)表示将函数的返回值赋给当前匹配的表单元素，index表示当前元素在匹配集合中的索引位置，oldValue表示当前元素在修改之前的value值

html()和val()方法修改页面元素及表单元素：

<script type="text/javascript">
function submitNewsDiscuss(){
	var inputDiscuss=$("#inputDiscuss").val();
	//链式操作方式
	$("#newsDiscuss").html("<hr/>评论如下："+inputDiscuss)
		.css("color",$("#discussColor").val())
		.css("font-size",$("[name=discussSize]:checked").val());
	}
</script>
Web前端复习-11、jQuery基础

注意：

所谓的链式操作方式是指在同一个jQuery对象上的一系列动作，通过直接连写形式无需重复获取该对象。采用链式操作时，jQuery会自动缓存每一步操作的结果，比非链式方式（手动缓存）要快。

4、jQuery事件处理

  • 当页面或某些元素发生变化或操作时，浏览器会自动触发一个事件，例如：文档加载完毕和点击按钮
  • 事件处理是指在某一时刻页面元素对某种操作的响应处理
  • jQuery中的事件处理是在JavaScript事件处理机制的基础上进一步扩展与增强，极大地增强了事件处理能力

4.1 页面加载事件

  • 在jQuery中 $(document).ready() 方法用于处理页面加载完毕时的事件，极大地提高了Web应用程序的响应速度。
  • 当访问一个含有大量图片的网站时，使用window.onload方式需要等待所有幅图片加载完毕后才能进行操作；而使用 $(document).ready()方式处理时，当DOM元素就绪时便会进行事件处理，无需等到所有的图片下载完毕
  • 使用window.onload方式多次绑定事件处理函数时，只保留最后一个，执行结果也只有一个
  • $(document).ready()允许多次设置处理事件，事件执行结果会相继输出 
//第一次设置页面加载事件处理
$(document).ready(function(){
        alert("第一次执行");
});
//第二次设置页面加载事件处理
$(document).ready(function(){
       alert("第二次执行");
});
           
//简写形式（一）
$(function(){
        //jQuery处理代码
});
//简写形式（二）
$().ready(function(){
       //jQuery处理代码
});

4.2 事件绑定

所谓事件绑定是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事先绑定的事件处理函数。

在jQuery中，提供了强大的API来执行事件的绑定操作，例如：

  • bind()
  • one()
  • toggle()
  • live()
  • delegate()
  • on()
  • hover()
4.2.1 bind()方法

bind()方法用于对匹配元素的特定事件绑定的事件处理函数。

  • 参数types表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开
  • 事件类型包括鼠标事件或键盘事件，鼠标事件包括click、submit、mouseover和mouseup等，键盘事件包括keydown和keyup等
  • 参数data（可选），表示传递给函数的额外数据，在事件处理函数中通过event.data来获得所传入的额外数据
  • 参数fn是指所绑定的事件处理函数 
//绑定click事件
$("p").bind("click", function(){
           alert($(this).text());
});
//为一个对象同时绑定mouseenter和mouseleave事件
$("p").bind("mouseenter  mouseleave",function(){
           $(this).toggleClass("entered");
});
//为一个对象同时绑定多个事件，且每个事件具有单独的处理函数
$("button").bind({
           click:function(){$("p").slideToggle();},
           mouseover:function(){$("body").css("background-color","red");},
           mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
//事件处理之前传递一些附加的数据
function handler(event){
           alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

jQuery为常用的事件提供了一种简写方式，与bind()方法实现的效果完全相同。

$("input[type=button]").click(function(){
	$(this).toggleClass("entered");
});

其中：

  • this是执行上下文（Execution Context）的一个重要对象，用于指明触发事件的对象本身；
  • $(this)是jQuery对this对象的封装，用于在事件处理中收集事件触发者的信息。
4.2.2 one()方法

one()方法用于对匹配元素的特定事件绑定一个一次性的事件处理函数，事件处理函数只会被执行一次。

  • 参数types表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开
  • 参数data（可选），表示传递给函数的额外数据
  • 在事件处理函数中通过event.data来获得所传入的额外数据

one()方法绑定事件：

//绑定click事件
$("p").one("click",function(){
	alert($(this).text());
});
4.2.3 toggle()方法

toggle()方法用于模拟鼠标连续单击事件。

  • 参数speed用于设置元素的隐藏（或显示）速度，默认是0，取值范围是slow、normal、fast或毫秒数
  • 参数easing用于指定动画的切换效果，取值范围是swing（默认）和linear
  • 参数fn1,fn2,fn3, … fnN表示1~n个事件处理函数；fn1表示第一次点击时所执行的事件处理函数；fn2表示第二次点击时所执行的事件处理函数；当有更多函数时依次进行触发直到最后一个，然后在从开始位置循环调用
  • 同时具有参数speed、fn时，表示以speed速度显示或隐藏，在动画完成后再执行fn事件处理函数 
//模拟连续多次单击事件
	$("#toggleBtn").toggle(function(){
			$(this).css("background-color","red");
		},function(){
			$(this).css("background-color","green");
		},function(){
			$(this).css("background-color","yellow");
		},function(){
			$(this).css("background-color","white");
		}
	);
	$("#toggleAnimateBtn").click(function(){
		//$("#newsContent").toggle(10000);
		$("#rightDiv").toggle("slow","swing",function(){
			$("#toggleAnimateBtn").css("background-color","red");
		});
	});
4.2.4 live()方法
  • 使用bind()方式绑定事件时，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素上没有事件响应
  • 使用live()方法能够对页面所有匹配元素绑定事件，包含存在的元素和将来新增的元素 
//live()方法的使用
$("div").live("click", function(){
    alert($(this).html());
});
4.2.5 delegate()方法

delegate()方法可以在匹配元素的基础上，对其内部符合条件的元素绑定事件处理函数

$("div").delegate("button","click",function(){
    $("p").slideToggle();
});
$("div").delegate("#DataBindBtn","click",{msg: "传递额外数据"},function(e){
    alert(e.data.msg);
});

使用live()和delegate()方法绑定事件：

<span><button>div显示与隐藏</button></span><button>普通按钮</button><hr/>
<div id="leftDiv">已存在的Div</div>
<script type="text/javascript">
	$(function(){
		//绑定事件
		$("div").live("click", function(){
			alert($(this).html());
		});
		//通过代码新增的Div
		$("body").append("<div id='rightDiv'>通过代码新增的Div</div>");
		//对span元素中button按钮绑定click事件处理
		$("span").delegate("button","click",function(){
			$("div").slideToggle();
		});
	});
</script>
Web前端复习-11、jQuery基础
4.2.6 on()方法

优先使用on()方法替代live()和toggle()方法，需要注意前参数的顺序和位置有所不同。

//使用live()方法绑定事件
$("div[id!=leftDiv]").live("click",function(){
	//事件处理代码
});
//使用on()方法替代live()方法
$(document).on("click","div[id!=leftDiv]",function(){
	//事件处理代码
});
//使用delegate()方法绑定事件
$("div").delegate("#DataBindBtn","click",{msg:"传递额外数据"},function(e){
	alert(e.data.msg);
});
//使用on()方法替代delegate()方法
$("div").on("click","#DataBindBtn",{msg:"传递额外数据"},function(e){
	alert(e.data.msg);
});
4.2.7 hover()方法

hover()方法用于模拟鼠标悬停事件；当鼠标悬停在某元素上时触发第一个函数，鼠标移出时触发第二个函数。

//使用hover()方法设置单元格悬停特效
$("td").hover(
	function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover");
	}
);

使用on()和hover()方法绑定事件处理函数：

//绑定事件（替代bind()方法）
$("#leftDiv").on("click","#bindBtn",function(){
	alert("使用bind()方法绑定事件处理");
});
//事件绑定，并传递额外数据（替代delegate()方法）
$("div").on("click","#dataBindBtn",{msg:"传递额外数据"},function(e){
	alert(e.data.msg);
});
//绑定事件（替代live()方法）
$(document).on("click","div[id!=leftDiv]",function(){
	alert($(this).html());
});
$(“#rightDiv”).hover(function(){

},function(){

});
Web前端复习-11、jQuery基础

4.3 解除事件绑定 

$("#removeBindBtn").on("click",function(){
   //1. 使用unbind()解除click事件绑定
   //$("#manyBindBtn").unbind("click");

   //2. 使用unbind()解除该元素上的所有事件绑定
   //$("#manyBindBtn").unbind();

   //3. 使用off()方法解除bind()方法的click事件绑定
   $("#manyBindBtn").off("click");
   //$(document).off("click","#manyBindBtn");

   //4. 使用off()方法解除该元素上的所有事件绑
   //$("#manyBindBtn").off();

   //5. 使用undelegate()方法解除delegate()方法绑定事件
   //$(document).undelegate("#delegateBindBtn","click");

   //6. 使用off()方法解除delegate()方法绑定事件
   $(document).off("click","#delegateBindBtn");

   //7. 使用off()方法解除on()方法的click事件绑定
   $("#leftDiv").off("click","#bindBtn");

   //8. 使用off()方法解除所有按钮上的所有的事件绑定
   $("input[type=button]").off();
});

4.4 事件对象（event）

  • 由于标准DOM和IE-DOM所提供的事件对象的方法有所不同，导致使用JavaScript在不同的浏览器中获取事件对象比较繁琐
  • jQuery针对该问题进行了必要的封装与扩展，以便解决浏览器兼容性问题，从而在任意浏览器中都可以轻松获取事件处理对象
事件对象的属性和方法
Web前端复习-11、jQuery基础
Web前端复习-11、jQuery基础
$("#stopSubmitBtn").on("click",function(event){
    console.log("点击'阻止默认按钮',阻止默认元素的默认行为（如表单提交等）"); 
    event.preventDefault();
    event.stopPropagation();
});
$("#middleDiv").on("mousemove",function(event){
    var x=parseInt(event.pageX-$(this).offset().left);
    var y=parseInt(event.pageY-$(this).offset().top);
    $(this).html("鼠标位置："+x+","+y);
});
$("#rightDiv").on("mousedown",{user:'jCuckoo'},function(event){
    if(event.which==1){
	$("#rightDiv").html(event.data.user+"点击了鼠标左键")
		.css("background-color","#FFC");
	}else if(event.which==2){
									}else if(event.which==3){
    }
});
Web前端复习-11、jQuery基础

总结

  • jQuery的设计理念是“少写多做”（write less, do more），是一种将JavaScript、CSS、DOM、Ajax等特征集于一体的强大框架，通过简单的代码来实现各种页面特效
  • jQuery提供的功能包括访问和操作DOM元素、强大的选择器、可靠的事件处理机制、完善的Ajax操作等
  • jQuery对象不能直接使用DOM对象中的方法，但可以将jQuery对象转换成DOM对象后再调用其方法
  • 根据页面元素的不同，jQuery选择器可分为基本选择器、层次选择器、过滤选择器、表单选择器四大类
  • jQuery还提供了功能更加强大的过滤选择器，可以根据特定的过滤规则来筛选出所需要的页面元素，主要包括简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器
  • 通过jQuery提供的选择器可以快速定位到页面的每个元素，然后对元素进行各种操作，如属性操作、样式操作和内容操作等
  • jQuery还提供了addClass()、removeClass()和==toggleClass()==方法，实现对页面元素的样式追加、移除和替换等操作
  • jQuery提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值
  • jQuery中，提供了强大的API来执行事件的绑定操作，允许对事件进行多次绑定或一次性绑定
  • 常见的事件绑定方法有bind()、one()、toggle()、live()、delegate()、on()、hover() 等
复习 jquery
上一篇: GDB大法(四)
下一篇: #懂车之道讯#近日，懂车之道获悉，ALEFModelA正式成为北美地区首款获得美国联邦航空管理局(FAA)批准的电动VT

继续阅读