jquery基础

最新推荐文章于 2021-01-26 17:27:15 发布

Alvin_扣扣953821815

最新推荐文章于 2021-01-26 17:27:15 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript知识点

本文链接：https://blog.youkuaiyun.com/m0_37412958/article/details/78563432

JavaScript知识点专栏收录该内容

14 篇文章

订阅专栏

一、

将DOM对象包装成jQuery对象，我们已经见到两种了： 1）第一种是直接将一个DOM对象作为参数传递给$()： $(window)，这样函数$()会将window对象包装成一个jQuery对象然后返回； 2）第二种则是传递一个选择器的参数给$()： $('#parent')。

$实际上是一个函数，

结果为true。这里使用全等运算符比较这两个变量jQuery和$，结果相等，这说明jQuery和$指向的是同一个对象。实际上在引入了jQuery框架之后，它为我们提供了一个jQuery变量，以此作为一个接口让我们可以使用jQuery。但是由于在实际编程中jQuery这个变量使用的频率非常高，而五个单词输入起来相对麻烦一些，所以使用一个“$”变量，让其指向jQuery。

DOM对象和jQuery对象的区别：jQuery对象是由普通的DOM对象以及jQuery的功能集合构成的，因此要使用jQuery的功能特性，就需要先将普通的DOM对象通过构造器$()转换成jQuery对象，将普通的DOM对象作为参数传递给它。

jquery选择器：

1、元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2、属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3、id选择器
例如：$("#lastname") id="lastname" 的元素

4、类选择器：
$(".intro") 所有 class="intro" 的元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素

5、伪类选择器

二、jQuery 效果

1、隐藏显示：
hide() 和 show() 方法来隐藏和显示 HTML 元素；toggle() 方法来切换 hide() 和 show() 方法，如果当前是hide，toggle会调用show方法，反之则反。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

2、淡入淡出：
fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。例：

3、滑动
slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素。slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

4、改变css样式：css()函数。例：

[html] view plain copy

$("." + v).next().css("background-color", "blue");

利用“属性名/值”对所有匹配元素设置多个样式属性（值） css({"propertyname":"value","propertyname":"value",...});
eg：为所有的p元素设置background-color 和 font-size属性并赋值
$("p").css({"background-color":"yellow","font-size":"200%"});

5、 toggleclass()方法在jQuery中的描述为：为集合中的每个元素添加或移除一个或多个class，至于具体是添加还是移除则取决于当前这个元素中是否存在这个class值，或者由参数state的值决定增删。

三、文档操作

四、jQuery遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历

1、祖先遍历：

使用parents()查找一个元素所有的父节点，那最终父节点的最顶层会查找到html节点为止，包括这个节点。

2、后代遍历：

$("#div").find("*")表示要找到这个节点下所有在后代节点，包括子节点、孙子节点等

3、同胞遍历：

说明：前面在js博客里提到过js的顺序，而在网页中为了使格式规整，一般都把css和js放前面，这时候为了不出错，最好在js前面加上一个ready函数表示文档已全部加载完成，而这个ready函数一般简写成这样：$(function(){

//这里写主体代码，

})

五、js的隐式迭代：

如对一类元素进行一些统一的操作：

[html] view plain copy

$(window).load(function(){
var rows=document.querySelectorAll('tr.row');
var jqueryObj=$(rows);
jqueryObj.addClass('light');
})

也可用全部使用jquery代码：

[html] view plain copy

$('tr.row').addClass('light');

相对纯生的javascript少了循环，jQuery会自动的遍历这个数组，并为其中的每个元素执行这个添加class的操作。

六、jQuery中操作DOM节点的属性：jQuery为我们提供了attr()方法用于操作DOM的属性。

attr(属性名)
//获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）
attr(属性名, 属性值)
//设置属性的值（为所有匹配的元素设置一个属性值。）

七、事件：

讲完了事件对象我们来讲一下事件冒泡，首先我们要知道冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。阻止事件进行冒泡：

1、通过返回false来取消默认的行为并阻止事件冒泡。
$("form").bind(
　　"submit",
　　function() {
　　　　return false;
　　 }
);

2、通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind(
　　"submit",
　　function(event){
　　　　event.preventDefault();
　　}
);

3、通过使用 stopPropagation() 方法只阻止一个事件冒泡。
$("form").bind(
　　"submit",
　　function(event){
　　　　event.stopPropagation();
　　}
);