jQuery学习总结1

琳琳在哪

已于 2022-03-23 22:01:12 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： jquery 前端

于 2022-03-18 22:40:02 首次发布

本文链接：https://blog.csdn.net/qq_63479468/article/details/123584702

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

4.window入口函数与jQuery入口函数的区别

五、mouseoverover事件和mouseenter事件

一、原生js与jq的区别

1.原生js的缺点

不能添加多个入口函数（后边的会覆盖前面的）；
原生js的api名字不好记；
原生js有时候代码冗余；
原生js中有些属性或者方法有浏览器兼容问题；
原生js容错率较低，前面代码出问题，后面代码执行不了。

2.jQuery的优势

可以写多个入口函数
名字容易记忆
代码简洁（隐式迭代）
解决了浏览器兼容问题
容错率较高，前面代码出错，后面代码不受影响

二、jQuery简单使用

1.

（1）引入jQuery文件
（2）写一个入口函数

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

（3）找到你要操作的元素

2.jQUery的个版本及区别

（1）官网中下载jQuery文件
（2）1.x 支持老版本浏览器，2.x，3.x 不支持老浏览器，

3.jQuery的两种写法

/*第一种*/
$（document）.ready(function(){
}）；
/*第二种*/
$(function(){
});

4.window入口函数与jQuery入口函数的区别

（1）window入口函数不能写多个，jquery入口函数可以写多个
（2）执行时机不同:

a.jQuery入口函数要快于window.onload.

b.jQuery入口函数要等待页面上dom树加载完后执行．
window.onload要等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行。

5.$函数

（1）$是什么?
如果报了这个错误: $is not defined ,就说明没有引入jQuery文件.

（2）jQuery文件结构.

其实是一个自执行国数

(function(){
 window.jQuery = window.$ = jQuery;
}());

（3）

a.引入一个js文件,是会执行这js文件中的代码的；

b.jQuery文件是一个自执行函数,执行这个jQuery文件中的代码,其实就是执行这个自执行函数；

c.这个自执行文件就是给window对象添加一个jQuery属性和$属性;

d.$其实和jQuery是等价的,是一个画数。

（4）$是一个函数（参数传递不同,效果也不一样）

a.如果参数传递的是一个匿名函数，比如入口函数：$(function(){} );
b. 如果参数传递的是一个字符串，比如选择器/创建一个标签：

$( '#one');
$( ' <div>啦啦,我是一个div</div> ");
c.如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象；

$(dom对象);

6.jQuery对象

（1）jQuery对象
利用jQueny选择器获取到的对象；
特点:只能调用jQuery的方法或者属性,不能调用原生js的dom对象的属性或者方法，但是jQuery对象是可以调用jQuery的方法的。

（2）jQuery对象是长什么样?
jQuery对象是一个伪数组,jQuery对象其实就是dom对象的一个包装集

（3）dom对象转换成jQuery对象.

var div1 = document.getElementById("one");
var $div1 = $(div1);
console.log($div1);

（4）jQuery对象转换成dom对象

a.使用下标来取出来.

var $divs = $('div');
var div1 = $divs[0];
console.log(div1);

b.使用jQuery的方法 get();

var div2 = $divs.get(1);
console.log(div2);

7.jQuery特性：

a.隐式迭代

b.链式编程,在于一个方法返回的是一个jQuery对象,既然是jQueyrc对象就可以继续点出jQuery的方法来

$(this).children('div').show().parent().siblings('li').children('div').hide();

三、jQuery基本方法

1.设置获取文本内容：text();

（1）获取文本内容：

a.通过id获取标签的文本
会获取到这个id中所有的文本,包括后代元素的文本
b.通过标签名获取标签的文本
包含了多个dom元素的jQueny对象,通过text()方法获取文本，会把所有dom元素的文本获取到
（2）设置文本:text()方法给参数,参数就是要设置的文本

a.给某个标签设置文本会覆盖他原来的内容,如果设置的文本中包含标签,是不会把这个标签给解析出来的。

$('#div1').text('我是新设置的文本1');
$('#div1').text('我是新设置的文本<a>我是连接</a>');

b.给标签为div的元素设置文本
包含了多个dom元素的jQuery对象,通过text()方法设置文本,会把所有的dom元素都设置上.

$('div').text('设置的文本');

2.设置获取样式：css();

设置或返回被选元素的一个或多个样式属性。

（1）获取样式

可通过id，标签名等选择器获取样式

*a.在IE浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框（上边框或者其他边框）；

b.获取包含多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式；

（2）设置样式

a.设置单样式：

$(操作元素).css('属性','属性值');

b.设置多样式：

$(操作元素).css({
    属性1:属性值,
    属性2:属性值,
    ...
    属性n:属性值
}）
//各属性之间用逗号隔开，最后一个可不加逗号

*给标签设置属性会把每一个这类标签设置了同样的属性