jquery基础学习笔记

哈哈哈哈哒

已于 2022-03-08 20:01:02 修改

阅读量170

点赞数

分类专栏：前端学习笔记文章标签： jquery javascript 学习

于 2020-03-02 11:22:07 首次发布

本文链接：https://blog.csdn.net/qq_45568705/article/details/102781102

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在官网上下载jquery文件后就可以使用
jquery库的核心方法：$()----------是jQuery()的缩写
如：

$( function() {} ); //执行一个匿名方法
$('#box');//进行执行的ID元素选择
$('#box').css('color','red');//执行功能方法

jQuery（）方法有7个重载：

jQuery（）该方法返回一个空的jQuery对象
jQuery（elements）该方法实现讲一个或多个DOM元素转化为jQuery对象或者集合的功能
jQuery（callback）该方法等价于jQuery(document).ready(callback),用来实现绑定在DOM文档载入完成后的方法
jQuery（expression，[context]）该方法接收一个包含jQuery选择器的字符串，在具体执行时，会使用传入的字符串去匹配一个或多个元素
jQuery（html）该方法具体执行时，会更具传入的html标志代码，动态创建由jQuery对象封装的DOM元素
jQuery（html，props）在上一个基础上还会设置该DOM元素的属性，事件等
jQuery（html，[ownerDocument]）在5的基础上还会指定该DOM元素所在的文档

jQuery的代码模式为连缀方式，可以不停的连续调用功能方法，如：

$('#box').css('color','red').css('font-size','50px'); //连缀

jQuery库延迟等待加载模式：
jQuery代码文件在标签元素之前加载，而jQuery代码文件里的方法一般需要操作DOM元素，必须要等待所有的DOM元素加灾后才能进行元素操作。所以需要jQuery库延迟加载
方法：使用 $ (),即$ (function(){}) 将方法进行收尾包裹

在JavaScript中使用的是load事件来进行延迟加载：
这种方法，必须等网页全部加载完才可执行包裹代码，而且只能执行一次，执行多次之前的代码被覆盖，在实际应用中使用较少

window.onload=function(){};

在jQuery代码里，使用的是
这个方法，在网页加载完就立刻执行包裹代码，可多次执行不会被覆盖

$ (document).ready(function(){});//jQuery等待加载

简写为：$ (function(){});

jQuery对象
jQuery对象实际上是包含一个数组对象和各种方法的类
jQuery的操作都是从jQuery对象开始的，需要获取jQuery对象后，才可以使用jQuery库所提供的方法，比如获取html代码：

$('#txt').html();
//返回的是id为txt的元素，然后调用jQuery对象的html()方法

在JavaScript中使用的是DOM对象

document.getElementById("txt").innnerHTML;
//返回id为txt的元素内的html代码

可以发现jQuery对象和DOM对象不可以相互调用，但在jQuery库中包含了所有的DOM操作，但对于初学者来说很难记住jQuery库中的所有方法，因此需要实现DOM对象和jQuery对象之间的相互转化

jQuery对象转化为DOM对象
jQuery对象实际上是包含一个数组对象和各种方法的类，而jQuery对象的数组里包含的是DOM对象，可以通过索引 [index] 的方式将jQuery对象转换成DOM对象

var $cr=$('txt');//获取jquery对象$cr
var cr=$cr[0];//获取jquery对象$cr转换成dom对象

jQuery对象还专门提供了一个方法将jquery对象转换成DOM对象
get（index）
实例：

var $cr=$("txt");//获取jquery对象$cr
var cr=$cr.get(0);//将jquery对象$cr转换成dom对象

DOM对象转换成jquery对象
方法：$(dom对象)
实例：

var cr=docuemnt.getElementById("txt");//获取dom对象
var $cr=$(cr);//将dom对象cr转换成jquery对象

注意事项：在开发中，如果获取的对象是jQuery对象，那么在变量标识符前面加上$，这样容易识别出哪些是jQuery对象
实例：
var $variable=jquery对象

基本选择器：
jQuery库最核心的组成部分就是选择器，jQuer库的选择器继承了css语法，还有一些自定义的选择器，用于各种特殊状态的选择

与css选择器语法一致，jQuery也支持三种基本的选择器
见下表：

选择器	css语法	jQuery语法	描述
标签选择器	div{}	${ 'div' }	获取所有div元素的DOM元素
ID选择器	#box{}	${'#box'}	获取一个ID为box元素的DOM元素
类选择器（class）	.box{}	${'.box'}	获取所有class为box的DOM对象

标签选择器，又称元素选择器，用于选择HTML页面中已有的标签元素。标签选择器获取元素的方式不仅高效，获取到的是该元素的整个的集合
实例：

//HTML文件：
<body>
<div>标签选择器</div>
</body>
//css中：
div{
color：red;
}
//js文件中使用jQuery来实现
$('div').css('color','red');

ID选择器
用于选择具有ID属性值的元素，这种方式不仅高效，其结果只能是一个标签元素，因为在HTML页面中，id值时唯一的
实例：

//HTML文件
<body>
<div id="box"> ID选择器</div>
</body>
//css中
#box{
color:red;
}
//js文件中使用jQuery来实现
$('#div').css('color','red');

类选择器，这种方式和ID选择器类似，获取元素的方式高效，且其结果是一个集合

进阶选择器
在css选择器的基础上，jQuery库仿照css语法又支持群组选择器，后代选择器和通配符选择器，这些选择器统称为进阶选择器
具体见下表：

选择器	css语法	jQuery语法	描述
群组选择器	span,em,box{}	${ 'span,em,box' }	获取多个选择器的DOM元素
后代选择器	ul li a{}	${'ul li a'}	获取追溯到的多个DOM元素
通配符选择器	*{}	${'*'}	获取所有元素标签的DOM对象

具体实例，与基本的选择器相类似，这里不再赘述，只需注意一下几点即可：群组选择器，元素之间用 "," 隔开，后代选择器参数之间用空格隔开，且后代元素可能是祖先元素的子元素，孙元素，重孙元素等，通配符选择器使用的较少，效率低

高级选择器
随着jQuery库的兼容，一些高级浏览器也得以使用

选择器	css语法	jQuery语法	描述
子选择器	div>p{}	$('div>p' )	获取子类节点的多个DOM对象
next选择器	div+p{}	$('div+p')	获取某节点后一个同级DOM元素
nextAll选择器	div~p{}	$('div~p'）	获取所有元素标签的DOM对象

1. 子选择器子选择器用于在指定的父元素下查找该元素下面的所有子元素如：

//html代码
<body>
<div id="box">
<p>
hello
</p>
</div>
</body>
//css代码
div{
#box>p;
}
//jQuery代码
$("#box>p").css('color','red');
//或者
//$('#box').children('p').css('color','red');

next选择器
next选择器也叫紧邻同辈元素选择器，即用于匹配紧邻指定元素的同辈元素
如：显示为p5为红色，表示第一个同辈元素 < p>

//html代码
<body>
<p>
		   	p1
		</p>
		<p>
		   	p2
		</p>
		<p>
		   	p3
		</p>
		<div id="box">
			<p>
			   p4
			</p>
		</div>
		<p>
		   p5
		</p>
		<p>
		   p6
		</p>
</body>
//css代码
#box+p{
color:red;
}
//jQuery代码
$('#box+p').css('color','red');

nextAL选择器
nextALL选择器也叫相邻同辈元素选择器，即用于匹配指定元素的所有同辈元素
如：显示p5,p6为红色，表示匹配所有的同辈元素

//html代码
<body>
<p>
		   	p1
		</p>
		<p>
		   	p2
		</p>
		<p>
		   	p3
		</p>
		<div id="box">
			<p>
			   p4
			</p>
		</div>
		<p>
		   p5
		</p>
		<p>
		   p6
		</p>
</body>
//css代码
#box~p{
color:red;
}
//jQuery代码
$('#box~p').css('color','red');

过滤选择器
简称为过滤器，对应于CSS中的伪类选择器，jQuery库所支持的所有过滤器都以（：）冒号开头，按过滤规则分可以分为基本过滤器，内容过滤器，可见性过滤器，子元素过滤器，表单对象属性过滤器，表单过滤器和其他过滤器。
基本过滤器11种：
内容过滤器4种：

可见性过滤器2种：

过滤器名	jQuery语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

子元素过滤器4种
在这里插入图片描述
表单对象属性过滤器4种

表单过滤器10种

其他过滤器

哈哈哈哈哒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery基础学习笔记

在官网上下载jquery文件后就可以使用jquery库的核心方法：$()----------是jQuery()的缩写如：$( function() {} ); //执行一个匿名方法$('#box');//进行执行的ID元素选择$('#box').css('color','red');//执行功能方法jQuery（）方法有7个重载：jQuery（）该方法返回一个空的jQuery对象...
复制链接

扫一扫