jQuery (JavaScript 脚本库)

最新推荐文章于 2022-12-28 17:39:47 发布

BF-LoneSilverWind

最新推荐文章于 2022-12-28 17:39:47 发布

阅读量1k

点赞数

分类专栏： web 前端_基础

本文链接：https://blog.csdn.net/digua930126/article/details/105865179

版权

web 前端_基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery

简介:

是一套兼容多浏览器的 javascript 脚本库.

jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery

一、jQuery 的下载和安装

1. 官网http://jquery.com/

在这里插入图片描述

2. 版本

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)

（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)

（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)

可以直接复制源代码粘贴成一个新的jquery.js文件或在官网 download f12 开发者工具刷新 network中复制原 jquery.js文件

3. 优点

（1）提供了强大的功能函数

（2）解决浏览器兼容性问题

（3）实现丰富的 UI 和插件

（4）纠正错误的脚本知识太多了! 等待我们一一去发现…

4. 安装在页面引入

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

注解:
引入就是导入

引入位置:
js建议引入body后因为有可能发生null错误

(如果script标签设置了src属性,则在script双标签中写的js 代码无效)

jquery并没有特定位置但建议放在最后

二、jQuery 核心

$符号在 jQuery 中代表对 jQuery 对象的引用,jQuery是核心对象，通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供的方法.

$<==> jQuery

三、DOM 对象和 jQuery 包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 供的方法。

1. Dom 对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:

例如:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

2. jQuery 包装集|对象

可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:

var jQueryObject = $("#testDiv");

3. Dom 转 jQuery 对象

Dom 对象转为 jQuery 对象，只需要利用$()方法进行包装即可

// 获取 Dom 对象
var domDiv = document.getElementById('mydiv'); 
mydiv = $(domDiv);

4. jQuery 对象转 Dom 对象

1. `jQuery`强转 jQuery(‘元素’)

2. `$`强转 $(‘元素’)

1.方法和2.方法其实是一种方式一般都用$

3. 可以用jquery独有的each语法来转换

jQuery 对象转 Dom 对象，只需要取数组中的元素即可

//第一种方式 获取 jQuery 对象

var jqueryDiv = jQuery('#mydiv');

//第二种方式 获取 jQuery 对象

jqueryDiv = $('#mydiv');
jquery对象是数组[]

var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom

通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象

	$('#mydiv').each(function() {//遍历
	var jquery = $(this);
	});

描述:
    用jquery获取节点如果节点不存在,会返回空包装集
    用原生js获取节点如果节点不存在,会返回null
    所以要判断jquery对象是否存在要看length

each语法:

jquery对象.each(function([当前下标,当前被遍历元素]){

});

知识点提示:this:谁调用函数,this指向谁

代码案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mydiv">write less, do more</div>
<script type="text/javascript">
    console.log("-------------获取 dom 对象------------------")
    //dom 对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);

    console.log("-------------获取 jquery 对象------------------")
    //获取 jquery 对象
    // 第一种方式
var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    //第二种方式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);
    console.log("-------------dom 转 jquery------------------")
    //dom 转 jquery 包装集/对象
    var obj = $(domDiv);
    console.log(obj);
    // console.log("-------------jquery 转 dom------------------")
    // jquery 对象转 dom 对象
    var dom = $('#mydiv')[0];// 获取 jquery 对象转为 dom
    // 或
    var dom2 = jqueryDiv[0];
    // 将 jquery 对象转为 domconsole.log(dom);
    console.log(dom2);
    /*this 代表了 dom 对象，不是 jquery 对象*/
    console.log("-------------dom 转 jquery------------------")
    $('#mydiv').each(function() {//通过 id 选择器选择了 id 为 mydiv 的所有元素
    // 然后进行遍历，那么遍历出的每个元素就是 id 为 mydiv 的标签元素，
    // 而 this 就代表了当前的这个元素
    var jquery = $(this);})
    console.log("-------------jquery 转 dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this;
    })
</script>
</body>
</html>

四、jQuery 选择器

和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提供了简便的方式供我们查找|定位元素，称为 jQuery 选择器，选择器可以说是最考验一个人jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

1. 基础选择器 Basics（掌握即可）

在这里插入图片描述

id选择器

`$("#id名")`

元素选择器

`$("div")`

类选择器

`$(".类名")`

全选择器选择所有选择器

`$("*")`

组合选择器同时选中这几个选择器匹配的

`$("# A,B,.C")`

用英文的 , 隔开

知识点:

dom：innerHTML="...."，innerText="....."

jquery： .html("...")，.text("......")

2.层次选择器 Hierarchy

在这里插入图片描述

后代选择器

`ancestor descendant $("#parent div")`

所有div后代

子代选择器

`parent > child $("#parent>div")`

直接div后代

相邻选择器

`prev + next $(".blue + img")`

同辈选择器

`prev ~ sibling $(".blue ~ img")`

3.表单选择器Forms

在这里插入图片描述

表单选择器

`:input $(":input ")`

文本框选择器

`:text $(":text ")`

密码框选择器

`:password $(":password")`

单选框选择器

`:radio $(":radio ")`

复选框选择器

`:checkbox $(":checkbox ")`

提交按钮选择器

`:submit $(":submit ")`

图像域选择器

`:image $(":image ")`

重置按钮选择器

`:reset $(":reset ")`

按钮选择器

`:button $(":button")`

文件域选择器

`:file $(":file ")`

4.属性选择器

`$("[属性名]")`

例如:$("[属性名]")选择所有设置过name属性值的元素

`$("[属性名=属性值]")`

以上都可以加入嵌套过滤

五、jQuery DOM 操作

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动画操作等。注意：以下的操作方式只适用于 jQuery 对象.

1. 操作元素的属性

获取属性

在这里插入图片描述

`attr(属性名称)`

`prop(属性名称)`

设置属性

在这里插入图片描述

`attr(属性名称,属性值)`

`prop(属性名称,属性值)`

		// 2、非空判断
		if (isEmpty(nickName)) {
			// 如果为空，提示且return
			$("#msg").html("用户昵称不可为空！");
			// 禁用按钮
			$("#btn").prop("disabled",true);
			return;

移除属性

在这里插入图片描述

`removeAttr(属性名)`

代码案例:

<script>
	
	/*=============取值===============*/
	// 固有属性：元素本身就有的属性
	var type = $(":checked").attr("type");
	console.log(type);
	var type2 = $(":checked").prop("type");
	console.log(type2);
	
	// 自定义属性
	var data1 = $(":checked").attr("data-id");
	var data2 = $(":checked").prop("data-id");
	console.log(data1);
	console.log(data2);
	
	// 返回值是boolean类型的属性
	var ck1 =  $(":checked").attr("checked");
	var ck2 =  $(":checked").prop("checked");
	console.log(ck1);
	console.log(ck2);
	
	
	// 未设置过的checked属性
	var ck3 =  $("#bb").attr("checked");
	var ck4 =  $("#bb").prop("checked");
	console.log(ck3);
	console.log(ck4);
	
	
	/*=============赋值===============*/
	// 固有属性：元素本身就有的属性
	$("#bb").attr("name","hobby");
	$("#bb").prop("name","hobby2");
	
	
	// 自定义属性
	$("#aa").attr("data-id","Hi");
	$("#aa").prop("data-id","Hi2");
	
	// 返回值是boolean类型的属性
	//$("#bb").attr("checked","checked");
	//$("#bb").attr("checked",true);
	$("#bb").prop("checked",true);
	
	
	/*===========移除属性============*/
	$("#aa").removeAttr("data-id");
	
</script>

2. 操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
在这里插入图片描述

`attr("样式名称")`

`attr("class","样式名")`

修改/覆盖原本的class属性重新赋值样式名是写在head中的样式

`addClass("样式名")`

添加样式,原本的样式保留,如果出现相同的样式名,则以样板中后定义的为准

`css()`

添加具体的样式名相当于(定义在style属性中的样式) 优先级== 行内样式块

增加元素的具体样式，格式：

1）css({‘样式名’:‘样式值’,‘样式名 2’:‘样式值 2’})

例：css({“background-color”:“red”,“color”:"#fff"})

2）css(“样式名”,“样式值”)

例：css(‘color’,‘white’)

`removeClass(class)`

3. 操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是 html
在这里插入图片描述

`html()`

`html("html 内容")`

`text()`

`text("text内容")`

`val()`

`val('值')`

4. 创建元素

在 jQuery 中创建元素很简单，直接使用核心函数即可

在这里插入图片描述

`$()`

5. 添加元素

在这里插入图片描述

`prepend()`

字符串 | jquery对象

`$(被设置元素).prependTo(要设置位置)`

只能jquery对象

prepend 和 prependTo 有父子关系

添加到…中的最前面

`append()`

字符串 | jquery对象

`$(被设置元素).appendTo(要设置位置)`

只能jquery对象

append 和 appendTo 有父子关系

添加到…中的最后面

`before前添加内容`

`after后添加内容`

以上两种同级关系

6.删除元素

在这里插入图片描述

`remove()删除:内容和标签`

`empty()清空:删除内容保留标签`

7.遍历元素

`each()`

$(selector).each(function(index,element)) {

});

:遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是当前的元素，此时是 dom 元素。

六、Jquery

1. ready()加载

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})

等价于

$(function(){})

is not defined报错分析:

1.jquery未引入

2.顺序问题

常见问题:onload事件和 ready事件的区别:

ready:当Dom结构加载完毕后,ready事件就执行;

onload:当Dom结构加载完毕后,并且引入的外部文件加载完毕,onload事件才执行;

2. bind()绑定元素事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType [,eventData],handler(eventObject))

eventType 事件类型：

是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

[, eventData]：传递的参数

格式：{名:值,名 2:值 2}

handler(eventObject)：该事件触发执行的函数

要素步骤:

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

示例代码:

// 简单的bind事件

$("#btn1").bind("click",function(){

console.log("这是一个简单的bind事件");

});
// 原生的js绑定点击事件

document.getElementById("btn1").onclick = function(){

console.log("这是原生的js绑定点击事件");

}
/* ============ 绑定多个事件 ===========*/

// 多个事件绑定同一个函数

$("#btn2").bind("click mouseout",function(){

console.log("多个事件绑定同一个函数...");

});


// bind链式编程

$("#btn3").bind("click",function(){

console.log("Hello...");

}).bind("mouseout",function(){

console.log("Hi...");

});



$("#btn4").bind({

"click":function(){

console.log("你好...");

},

"mouseout":function(){

console.log("我不好...");

}

});

/* ** */

$("#btn5").click(function(){

console.log("...");

}).mouseout(function(){

console.log("。。。");

});

七.其他

语法

`$.trim( str )`

在这里插入图片描述

BF-LoneSilverWind

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery (JavaScript 脚本库)

jQuery简介:    是一套兼容多浏览器的 javascript 脚本库.    jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 框架，在世界前 1...
复制链接

扫一扫