简洁、快速的JavaScript框架/库：jQuery

最新推荐文章于 2023-01-19 10:15:44 发布

water1127

最新推荐文章于 2023-01-19 10:15:44 发布

阅读量1.5k

点赞数

分类专栏： JavaWeb 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_40981851/article/details/104165412

版权

JavaWeb 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

基础知识

简介

jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery本质上就是一些js文件，封装了js的原生代码而已。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

安装

下载JQuery
- 目前jQuery有三个大版本
  - 1.x
    - 兼容ie678,使用最为广泛的，官方只做BUG维护，
    - 功能不再新增。因此一般项目来说，使用1.x版本就可以了。
  - 2.x
    - 不兼容ie678，很少有人使用，官方只做BUG维护，
    - 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。
  - 3.x
    - 不兼容ie678，只支持最新的浏览器。
      - 除非特殊要求，一般不会使用3.x版本的，因为很多老的jQuery插件不支持这个版本。
      - 目前该版本是官方主要更新维护的版本。
- 每个大版本包括两个小版本
  - jquery.js
    - Development version（开发版本） - 用于测试和开发。
    - 给程序员看的，有良好的缩进和注释，体积大一些，程序加载较慢。
  - jquery.min.js
    - Production version（生产版本）- 用于实际的网站中，已被精简和压缩。
    - 在程序中使用，没有缩进，体积小一些，程序加载更快。
导入JQuery的js文件
引入Jquery资源
- 请注意，<script> 标签应该位于页面的 <head> 部分。

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

基础语法

$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作

文档就绪函数

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小

/* 完全体 */
$(document).ready(function(){

});

/* 简化版 */
$(function(){

});

转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用
两者相互转换
- Jquery – > JS
  - Jquery对象[索引]
  - Jquery对象.get(索引)
- JS – > Jquery
  - $(JS对象)

选择器

jQuery选择器允许您对元素组或单个元素进行操作。
- jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
- jQuery选择器允许您对 HTML 元素组或单个元素进行操作。
- 在 HTML DOM 术语中：jQuery选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

基本选择器

选择器	实例	描述
*	$("*")	所有元素
this	$(this)	当前 HTML 元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素
element	$(“p”)	所有 <p> 元素
element.class	$(“p.intro”)	所有 class=“intro” 的 <p> 元素
element#id	$(“p#demo”)	所有 id=“demo” 的 <p> 元素。

s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素

层级选择器

选择器	实例	描述
super sub	$(“table tr”)	选择 <table>元素内部的所有 <tr>元素（不仅是子元素）
super > sub	$(“table > tr”)	选择 <table>元素内部的所有 <tr>子元素

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

选择器	实例	描述
[atribute]	$("[href]")	所有带有 href 属性的元素
[[attribute = value]]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[[attribute != value]]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[[attribute $= value]]	$(" [h r e f$ =’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素

过滤选择器

选择器	实例	描述
[:first]	$(“p:first”)	第一个 <p> 元素
[:last]	$(“p:last”)	最后一个 <p> 元素
[:even]	$(“tr:even”)	所有偶数 <tr> 元素
[:odd]	$(“tr:odd”)	所有奇数 <tr> 元素

[:eq(index)]	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
[:gt(no)]	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
[:lt(no)]	$(“ul li:lt(3)”)	列出 index 小于 3 的元素

[:empty]	$(":empty")	无子（元素）节点的所有元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
[:header]	$(":header")	所有标题元素 <h1> - <h6>
[:contains(text)]	$(":contains(‘W3School’)")	包含指定字符串的所有元素

:hidden	$(“p:hidden”)	所有隐藏的 <p> 元素
[:visible]	$(“table:visible”)	所有可见的表格

表单过滤选择器

选择器	实例	描述
[:input]	$(":input")	所有 <input> 元素
[:text]	$(":text")	所有 type=“text” 的 <input> 元素
[:password]	$(":password")	所有 type=“password” 的 <input> 元素
[:radio]	$(":radio")	所有 type=“radio” 的 <input> 元素
[:checkbox]	$(":checkbox")	所有 type=“checkbox” 的 <input> 元素
[:submit]	$(":submit")	所有 type=“submit” 的 <input> 元素
[:reset]	$(":reset")	所有 type=“reset” 的 <input> 元素
[:button]	$(":button")	所有 type=“button” 的 <input> 元素
[:image]	$(":image")	所有 type=“image” 的 <input> 元素
[:file]	$(":file")	所有 type=“file” 的 <input> 元素

[:enabled]	$(":enabled")	所有激活的 input 元素
[:disabled]	$(":disabled")	所有禁用的 input 元素
[:selected]	$(":selected")	所有被选取的 input 元素
[:checked]	$(":checked")	所有被选中的 input 元素

事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。
- 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 术语由事件“触发”（或“激发”）经常会被使用。
如果你的网站包含许多页面，为了让 jQuery 函数易于维护，需要将 jQuery 函数放到独立的 .js 文件中。

<head>
<!-- 引入Jquery资源 -->
<script type="text/javascript" src="jquery.js"></script>
<!-- 引入独立的js文件 -->
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

鼠标事件

事件	描述
click	当单击元素时
dbclick	当双击元素时
mouseenter	当鼠标指针穿过（进入）被选元素时
mouseleave	当鼠标指针离开被选元素时
hover	当鼠标指针悬停在被选元素上时

键盘事件

事件	描述
keydown	键按下的过程
keypress	键被按下
keyup	键被松开

表单事件

事件	描述
submit	当提交表单时
change	当元素的值改变时发生 change 事件（仅适用于表单字段）
focus	当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时）
blur	当元素失去焦点时

窗口事件

事件	描述
resize	当调整浏览器窗口大小时
scroll	当用户滚动指定的元素时

DOM操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
- 提示：DOM = Document Object Model（文档对象模型）

内容操作方法

html()
- 获取/设置元素的标签体内容（包括 HTML 标记）
text()
- 获取/设置元素的标签体纯文本内容
val()
- 获取/设置元素的value属性值

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

属性操作方法

通用属性操作
- attr()
  - 获取/设置元素的属性
  - 如果操作的是元素自定义的属性，则建议使用attr
- removeAttr()
  - 删除属性
- prop()
  - 获取/设置元素的属性
  - 如果操作的是元素的固有属性，则建议使用prop
- removeProp()
  - 删除属性

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

对class属性操作
- addClass()
  - 添加class属性值
- removeClass()
  - 删除class属性值
- toggleClass()
  - 切换class属性
    - toggleClass(“one”):
      - 如果元素对象上存在class=“one”，则将属性值one删除掉。
      - 如果元素对象上不存在class=“one”，则添加。
- css()
  - 设置/添加属性值

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

文档操作方法

append()
- 父元素将子元素追加到末尾
  - A.append(B)
  - 将B添加到A元素内部，并且在末尾。
prepend()
- 父元素将子元素追加到开头
  - A.prepend(B)
  - 将B添加到A元素内部，并且在开头。
appendTo()
- 子元素将父元素追加到末尾
  * A.appendTo(B)
  * 将A添加到B内部，并且在末尾。
prependTo()
- 子元素将父元素追加到开头
  - A.prependTo(B)
  - 将A添加到B内部，并且在开头。
after()
- 添加元素2到元素1后边
  * A.after(B)
  * 将B添加到A后边（兄弟关系）
before()
- 添加元素2到元素1前边
  * A.before(B)
  * 将B添加到A前边（兄弟关系）
insertAfter()
- 添加元素1到元素2后边
  * A.insertAfter(B)
  * 将A添加到B后边（兄弟关系）
insertBefore()
- 添加元素1到元素2前边
  * A.insertBefore(B)
  * 将A添加到B前边（兄弟关系）
remove()
- 移除元素
  - A.remove()
  - 将A删除掉
empty()
- 清空元素的所有后代元素。
  - A.empty()
  - 将对象的后代元素全部清空，但是保留当前A以及其属性节点

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");
$("#div1").remove();
// jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$("p").remove(".italic");
$("#div1").empty();

动画

显示/隐藏

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
- show( speed，callback )
- hide( speed，callback )
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
- toggle(speed,callback)
speed：参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
callback：参数是隐藏或显示完成后所执行的函数名称。

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

$("button").click(function(){
  $("p").toggle();
});

淡入/淡出

通过 jQuery，您可以实现元素的淡入淡出效果。
- fadeIn() 用于淡入已隐藏的元素。
- fadeOut() 用于淡出可见元素。
- fadeToggle() 在淡入淡出之间切换。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

滑动

通过 jQuery，您可以在元素上创建滑动效果。
- slideDown() 用于向下滑动元素。
- slideUp() 用于向上滑动元素。
- slideToggle() 在向下滑动向上滑动之间切换。

$("#flip").click(function(){
  $("#panel").slideDown();
});

$("#flip").click(function(){
  $("#panel").slideUp();
});

$("#flip").click(function(){
  $("#panel").slideToggle();
});

遍历

JS的遍历方式

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

Jquery的遍历方式

Jquery对象.each(callback)
- jquery对象.each(function(index,element){});
  - index:就是元素在集合中的索引
  - element：就是集合中的每一个元素对象
  - this：集合中的每一个元素对象
  - callback：回调函数返回值
    - true：如果当前function返回为false，则结束循环(break)。
    - false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)
$.each(object, [callback])
for…of
- for(元素对象 of 容器对象)
  - Jqueryuery 3.0 之后

 /* for循环 */
var citys = $("#city li");
for (var i = 0; i < citys.length; i++) {
    //获取内容
    alert(i+":"+citys[i].innerHTML);
    if("上海" == citys[i].innerHTML){
        //break; 结束循环
        //continue; //结束本次循环，继续下次循环
    }
}

/* Jquery对象.each(callback) */
var citys = $("#city li");
citys.each(function (index,element) {
    // 1.获取li对象 第一种方式 this
    alert(this.innerHTML);//JS对象调用
    alert($(this).html());//Jquery对象调用
    // 2.获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
    alert(index+":"+element.innerHTML);
    alert(index+":"+$(element).html());
    //判断如果是上海，则结束循环
        if("上海" == $(element).html()){
            //返回false，结束循环(break)。
            //返回true，结束本次循环，继续下次循环(continue)
            return true;
        }
});

/*  $.each(object, [callback]) */
$.each(citys,function (index,element) {
	alert($(this).html());
});


/* for ... of  (jquery 3.0 版本之后提供的方式) */
for(li of citys){
	alert($(li).html());
}

事件绑定

Jquery标准的绑定方式
- jq对象.事件方法(回调函数)
  - 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  - 表单对象.submit();//让表单提交
on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
  - 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
toggle事件切换
- jq对象.toggle(fn1,fn2…)
  - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
  - 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script 
	src="../js/jquery-migrate-1.0.0.js" 
	type="text/javascript" 
	charset="utf-8">
</script>

插件

$.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id")
$.extend(object)
- 增强JQeury对象自身的功能 $/jQuery

water1127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简洁、快速的JavaScript框架/库：jQuery

基础知识简介jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery本质上就是一些js文件，封装了js的原生代码而已。j...
复制链接

扫一扫