jQuery的应用（一）

文章目录

• 1. 什么是jQuery
• 2. jQuery优点
• 3.jQuery页面编写步骤
• 4. jQuery三种工厂方法
• 1) jQuery(exp[,context])
• 2) jQuery(html)、jQuery(element)

1. 什么是jQuery

它是一个轻量级的javascript类库

注1：就一个类“jQuery”，简写“$”

2. jQuery优点

1） 总是面向集合
2） 多行操作集于一行

3.jQuery页面编写步骤

1）导入js库（以jquery.min.js为例）

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js">

${pageContext.request.contextPath }作用：这样设计绝对路径可以根据路径的更改进行自我更改，提高了很强的实用性。

2）$(fn)做为程序入口
注：fn就是function的缩写

<script type="text/javascript">
$(function() {

})
</script>

3） $(fn)、 $(document).ready(fn)与window.onload的区别？

//window.onload编写方式
window.onload = function(){
alert("Hollo jquery3");
}

//$(document).ready(fn)编写方式
$(document).ready(function () {
alert("Hollo jquery2");
})

//$(fn)编写方式
$(function () {
alert("Hollo jquery1");
})

/* $(fn)、$(document).ready(fn)是等价的，哪个代码在前面就哪个先执行；
jsp的dom树结构加载完毕即刻调用方法；
window.onload最后执行。
jsp的dom树结构加载完，css、js等静态资源加载完毕执行
dom数结构：jsp中document开发标签
*/

4. jQuery三种工厂方法

1) jQuery(exp[,context])

exp：选择器
context：上下文，环境/容器，documemt

exp主要的选择器分为以下几种：

$(function () {
//利用a标签获取jquery实例
/* $("a").click(function () {
alert("Hello Word!!!");
}); */

//利用id=a3获取jquery实例
/* $("#a3").click(function () {
alert("Hello Word!!!");
}); */

//类选择器
/* $(".c1").click(function () {
alert("Hello Word!!!");
}); */

//包含选择器
/* $("p a").click(function () {
alert("Hello Word!!!");
}); */

//组合选择器
/* $("a,span,h1").click(function () {
alert("Hello Word!!!");
}); */

context的用法

//讲解第二个参数的作用（在div内部寻找a标签，然后给找到的标签添加事件）
//如果第二个参数没有填，那么默认是document(整个页面去找)
$("a,span,h1").click(function () {
alert("Hello Word!!!");
});

2) jQuery(html)、jQuery(element)

html：基于html的一个字符串
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

我们以增加省份为例：

$(function() {
$(":input[name='name1']").click(function() {
//在id=selId1的select的jquery追加<option value='1'>湖南省</option>的html jquery实例
$("#selId1").append("<option value='1'>湖南省</option>");
});

$(":input[name='name2']").click(function() {
//将"<option value='1'>长沙市</option>"的html jquery实例追加到id=selId2的jquery实例中
$("<option value='1'>长沙市</option>").appendTo("#selId2");

/* var $h1 = $("#h1");
alert($h1.val());
//jquery对象转js对象
//var h1Node = $h1.get(0);
var h1Node = $h1[0];
alert(h1Node.value); */

var h2Node = document.getElementById("h2");
alert(h2Node.value);
//js对象转jquery对象
var $h2Node = $(h2Node);

alert($h2Node.val());

});

})

5. this指针的作用

作用：灵活的获取事件源与元素值

$(function () {
$(":input").click(function() {
//指的是当前事件源
alert(this.value);
$("a").each(function (index,item) {
//指的是当前元素
alert(index+","+$(this).html()+","+$(item).html());
});
});
})