JavaWeb--JQuery

字数统计: 3.5k字   |   阅读时长: 14分

一、概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展。
以上两点都是360百科对JQuery的描述。
通俗点来说：JQuery就是一个JavaScript框架。使用它简化了JavaScript开发。

二、快速入门Demo

步骤：
1、下载JQuery
2、导入JQuery文件
3、在JS代码中使用即可
Demo如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
	//导入JS文件
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1..</div>
    <div id="div2">div2..</div>

    <script>
        // 使用JQuery框架
        var div1 = $("#div1");
        alert(div1.html());

        var div2 = $("#div2");
        alert(div2.html());
    </script>
</body>
</html>

三、JQuery对象和JS对象互相转换

现在我们知道了使用JQuery可以简化JavaScript的开发，但是有时候我们又不得不使用JS（之后都将JavaScript简称为JS）中的一些方法，所以这个时候又需要将JQ（之后都将JQuery简称为JQ）对象转换为JS对象。

（一）JS对象 –> JQ对象

对于已经是一个js对象，只需要用$()把DOM对象包起来，就可以获得一个jQuery对象了。$(js对象)

（二）JQ对象 –> JS对象

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

1
如：$("#msg")[0]，$("div").get(1)，$("td")[5]

四、JQuery中的基本操作

（一）事件绑定（只是为了在案例中使用而提前涉及一点）
1
2
3
4
5
$("#b1").click(callback);  // callback指的是回调函数

$("#b1").click(function(){
	alert("abc");
});
（二）入口函数

在JS中也有入口函数

1
2
3
4
window.onload = function (ev) {
    $("#b1").click(function () {
        alert("哈哈哈！")
})

但JQ中的入口函数是这样的：

1
2
3
4
5
$(function () {
    $("#b1").click(function () {
        alert("哈哈哈！")
    });
});
1
2
3
window.onload 和 $(function) 的区别：
前者只能使用一次
后者可以使用多次
（三）样式控制

在JQ中可以通过调用css()方法来改变样式，如：

1
2
3
$("#div1").css("background-color","red");

$("#div1").css("backgroundColor","pink");

五、JQuery中的选择器

（一）基本选择器

1、标签选择器（元素选择器）
​ 语法： $(“html标签名”) 获得所有匹配标签名称的元素
2、id选择器
​ 语法： $(“#id的属性值”) 获得与指定id属性值匹配的元素
3、类选择器
​ 语法： $(“.class的属性值”) 获得与指定的class属性值匹配的元素
4、并集选择器：
​ 语法： $(“选择器1,选择器2….”) 获取多个选择器选中的所有元素

（二）层级选择器

1、后代选择器
​ 语法： $(“A B “) 选择A元素内部的所有B元素
2、子选择器
​ 语法： $(“A > B”) 选择A元素内部的所有B子元素

1
2
3
$("body div").css("backgroundColor", 'pink');	// 改变body标签中的所有div标签样式

$("body > div").css("backgroundColor", 'pink');	// 改变body标签下的第一次div标签样式
（三）属性选择器

1、属性名称选择器
​ 语法： $(“A[属性名]”) 包含指定属性的选择器
2、属性选择器
​ 语法： $(“A[属性名=’值’]”) 包含指定属性等于指定值的选择器
3、复合属性选择器
​ 语法： $(“A[属性名=’值’]…”) 包含多个属性条件的选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//改变有title属性的div标签的样式
$("div[title]").css("backgroundColor", "pink");		

//改变有title属性，且title属性值为test的div标签的样式
$("div[title='test']").css("backgroundColor", "pink");

//改变有title属性，且title属性值 不 为test的div标签的样式
$("div[title!='test']").css("backgroundColor", "pink");

//改变有title属性，且title属性值以 te 开始的div标签的样式
$("div[title^='te']").css("backgroundColor", "pink");

//改变有title属性，且title属性值以 te 结尾的div标签的样式
$("div[title$='est']").css("backgroundColor", "pink");

//改变有title属性，且title属性值 包含 es 的div标签的样式
$("div[title*='es']").css("backgroundColor", "pink");

//改变有id、title属性，且title属性值 包含 es 的div标签的样式
$("div[id][title*='es']").css("backgroundColor", "pink");
（四）过滤选择器

1、首元素选择器
​ 语法： :first 获得选择的元素中的第一个元素
2、尾元素选择器
​ 语法： :last 获得选择的元素中的最后一个元素
3、非元素选择器
​ 语法： :not(selector) 不包括指定内容的元素
4、偶数选择器
​ 语法： :even 偶数，从 0 开始计数
5、奇数选择器
​ 语法： :odd 奇数，从 0 开始计数
6、等于索引选择器
​ 语法： :eq(index) 指定索引元素
7、大于索引选择器
​ 语法： :gt(index) 大于指定索引元素
8、小于索引选择器
​ 语法： :lt(index) 小于指定索引元素
9、标题选择器
​ 语法： :header 获得标题（h1~h6）元素，固定写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//改变第一个 div 元素的背景色
$("div:first").css("backgroundColor", "pink");

//改变最后一个 div 元素的背景色
$("div:last").css("backgroundColor", "pink");

//改变class不为 one 的所有 div 元素的背景色
$("div:not(.one)").css("backgroundColor", "pink");

//改变索引值为偶数的 div 元素的背景色
$("div:even").css("backgroundColor", "pink");

//改变索引值为奇数的 div 元素的背景色
$("div:odd").css("backgroundColor", "pink");

//改变索引值为大于 3 的 div 元素的背景色
$("div:gt(3)").css("backgroundColor", "pink");

//改变索引值为等于 3 的 div 元素的背景色
$("div:eq(3)").css("backgroundColor", "pink");

//改变索引值为小于 3 的 div 元素的背景色
$("div:lt(3)").css("backgroundColor", "pink");

//改变所有的标题元素的背景色
$(":header").css("backgroundColor", "pink");
（五）表单过滤选择器

1、可用元素选择器
​ 语法： :enabled 获得可用元素
2、不可用元素选择器
​ 语法： :disabled 获得不可用元素
3、选中选择器
​ 语法： :checked 获得单选/复选框选中的元素
4、选中选择器
​ 语法： :selected 获得下拉框选中的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取type属性值为text，且为可用impute标签，并将其value属性设置为aaa
$("input[type='text']:enabled").val("aaa");

//获取type属性值为text，且为 不 可用impute标签，并将其value属性设置为aaa
$("input[type='text']:disabled").val("aaa");

//获取所有选中的单选框
$("input[type='checkbox']:checked")
alert($("input[type='checkbox']:checked").length);

//获取下拉框选中的元素
$("#job > option:selected")
alert($("#job > option:selected").length);

六、DOM操作

（一）内容操作

1、html(): 获取/设置元素的标签体内容
2、text(): 获取/设置元素的标签体纯文本内容
3、val()： 获取/设置元素的value属性值

（二）属性操作
通用属性操作

1、attr(): 获取/设置元素的属性
2、removeAttr():删除属性
3、prop():获取/设置元素的属性
4、removeProp():删除属性
attr和prop区别？
a. 如果操作的是元素的固有属性，则建议使用prop
b. 如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

1、addClass():添加class属性值
2、removeClass():删除class属性值
3、toggleClass():切换class属性
原理：
toggleClass(“one”): 判断如果元素对象上是否存在class=”one”。如果有，则将属性值one删除掉， 如果元素对象上不存在class=”one”，则添加。

（三）CRUD操作
父元素调用

1、append():父元素将子元素追加到末尾
​ 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2、prepend():父元素将子元素追加到开头
​ 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3、appendTo():
​ 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4、prependTo()：
​ 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

兄弟元素调用

1、after():添加元素到元素后边
​ 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
2、before():添加元素到元素前边
​ 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
3、insertAfter()
​ 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
4、insertBefore()
​ 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

移除元素

1、remove():移除元素
​ 对象.remove():将对象删除掉
2、empty():清空元素的所有后代元素。
​ 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

七、JQuery中的动画

（一）默认显示和隐藏方式

1、show([speed,[easing],[fn]])：显示
2、hide([speed,[easing],[fn]])：隐藏
3、toggle([speed],[easing],[fn])：切换

（二）滑动显示和隐藏方式

1、slideDown([speed],[easing],[fn])：滑动显示
2、slideUp([speed,[easing],[fn]])：滑动隐藏
3、slideToggle([speed],[easing],[fn])：滑动切换

（三）淡入淡出显示和隐藏方式

1、fadeIn([speed],[easing],[fn])：淡入淡出显示
2、fadeOut([speed],[easing],[fn])：淡入淡出隐藏
3、fadeToggle([speed,[easing],[fn]])：淡入淡出切换

1
2
3
4
5
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
	* swing：动画执行时效果是 先慢，中间快，最后又慢
	* linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。

八、JQuery中的遍历

（一）JavaScript中的遍历

for(初始化值;循环结束条件;步长)

（二）JQuery中的遍历

1、jq对象.each(callback)

1
2
3
4
5
6
7
8
9
语法：
jquery对象.each(function(index,element){});
	index:就是元素在集合中的索引
	element：就是集合中的每一个元素对象

	this：集合中的每一个元素对象
回调函数返回值：
	true:如果当前function返回为false，则结束循环(break)。
	false:如果当前function返回为true，则结束本次循环，继续下次循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var citys = $("#city > li");
citys.each(function (index, element) {
	alert(index + ":" + element.innerHTML);
});

//相当于使用break
citys.each(function (index) {
	if($(this).html() == "上海"){
		return false;
	}
	alert(index + ":" + this.innerHTML);
});

//相当于使用continue
citys.each(function (index) {
	if($(this).html() == "上海"){
		return true;
	}
	alert(index + ":" + this.innerHTML);
});

2、$.each(object, [callback])

1
和方式二不同，此处的Object对象既可以是JQ对象也可以是JS对象，其他的使用基本相同
1
2
3
4
5
6
7
8
9
10
11
var citys = $("#city > li");
$.each(citys, function (index) {
	alert(index + ":" + this.innerHTML);
});
            
citys.each(function (index) {
	if($(this).html() == "上海"){
		return true;
	}
	alert(index + ":" + this.innerHTML);
});

3、for..of: jquery 3.0 版本之后提供的方式

1
2
3
4
5
6
7
8
$(function () {
	//for...of:该方法只有在3.0版本只后才能使用
	var citys = $("#city > li");

	for(li of citys){
		alert($(li).index() + ":" + $(li).html());
	}
});

九、事件绑定

（一）jquery标准的绑定方式

jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
如：表单对象.submit();//让表单提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input id="name" type="text" value="绑定点击事件">

$("#name").mouseover(function () {
    $(this).val("");
});
$("#name").mouseout(function () {
    $(this).val("绑定点击事件");
});

//可以采用链式编程方法
 $("#name").mouseover(function () {
     $(this).val("");
 }).mouseout(function () {
     $(this).val("绑定点击事件");
 });
（二）on绑定事件/off解除绑定

jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
注：如果off方法不传递任何参数，则将组件上的所有事件全部解绑

1
2
3
4
5
6
$("#btn").on("click", function () {
  alert("我被点击了...");
});
 $("#btn2").click(function () {
     $("#btn").off("click");
 });
（三）事件切换

jq对象.toggle(fn1,fn2…)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…..
注意：注意：1.9版本 .toggle() 方法删除,但是使用jQuery Migrate（迁移）插件可以恢复此功能。

1
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
1
2
3
4
5
$("#btn").toggle(function () {
    $("#myDiv").css("backgroundColor", "pink");
}, function () {
    $("#myDiv").css("backgroundColor", "orange");
});

十、定义插件

我们也可以在JQuery中自定义插件来满足自己的需求。

（一）对象插件

$.fn.extend(object)：增强通过Jquery获取的对象的功能 $(“#id”)
在一个HTML文件中，有如下代码：

1
2
3
4
5
6
7
8
9
<body>
    <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
    <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
    <br/>
    <input type="checkbox" value="football">足球
    <input type="checkbox" value="basketball">篮球
    <input type="checkbox" value="volleyball">排球

</body>

假如：需要自定义一个插件，包含用来选中所有复选框和取消所有复选框的方法：

1
2
3
4
5
6
7
8
9
//自定义JQ对象插件
$.fn.extend({
    checkAll:function () {
        this.prop("checked", true);
    },
    uncheckAll:function () {
        this.prop("checked", false);
    }
});

调用插件：

1
2
3
4
5
6
7
8
$(function () {
    $("#btn-check").click(function () {
        $("input[type='checkbox']").checkAll();
    });
    $("#btn-uncheck").click(function () {
        $("input[type='checkbox']").uncheckAll();
    });
});
（二）全局插件

$.extend(object)：增强JQeury对象自身的功能
假如：定义一个全局插件，包含用来查找最大值和最小值的方法：

1
2
3
4
5
6
7
8
$.extend({
    max:function (a, b) {
        return a >= b ? a:b;
    },
    min:function (a, b) {
        return a <= b ? a:b;
    }
});

调用插件：

1
2
3
4
var max = $.max(3, 4);
alert(max);
var min = $.min(2, 1);
alert(min);

本文只总结了JQuery中一些常用的内容，更多详细的内容当然还是得看官方文档啦！

Java新手，若有错误，欢迎指正！！！

赏

都是码农，别客气了
| 阅读量次

扫一扫，分享到微信

微信分享二维码
本站总访问量: 本站总访客:

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

天下事有难易乎<br><br>为之，则难者亦易<br><br>不为，则易者亦难