jQuery学习

最新推荐文章于 2024-07-31 16:33:32 发布

ZikM_0221

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量232

点赞数

分类专栏： Web 文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/qq_43303906/article/details/124773170

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

💡:详细文档请查看 jQuery API 中文文档

入口函数

$(function(){

})

1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentl oaded.
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

jQuery的顶级对象

1.$是jQuery的别称,在代码中可以使用jQuery代替$ ,但一般为了方便,通常都直接使用$.
2.$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用
jQuery的方法。

jQuery对象和DOM对象

因为原生js比jQuery大,原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
1.DOM对象转换为jQuery对象：$(DOM对象)

$('div')

2.jQuery对象转换为DOM对象(两种方式)

$('div')[index] index是索引号
$('div').get(index) inde是索引号

jQuery选择器

$('选择器') //里面选择器直接写CSS选择器即可，但是要加引号

基本选择器

在这里插入图片描述

层级选择器

名称	用法	描述
子代选择器	`$('ul>li')`	使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器	`$('ul li')`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

jQuery设置样式

$('div').css('属性','值')

隐式迭代

遍历内部DOM元素(伪数组形式存储) 的过程就叫做隐式迭代

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,
方便我们调用。

示例

<div>周杰伦</div>
<div>刘德华</div>
<div>马可波罗</div>
<ul>
    <li>猪八戒</li>
    <li>孙悟空</li>
    <li>沙和尚</li>
</ul>

$(function(){
    $('div').css('background','pink')
    $('ul li').css('color','skyblue')
})

jQuery筛选选择器

示例

<ul>
    <li>HTMl</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
</ol>

$(function(){
    $('ul li:first').css('background','red')
    $('ul li:last').css('background','green')
    $('ul li:eq(1)').css('background','pink')
    $('ol li:odd').css('color','blue')
    $('ol li:even').css('color','skyblue')
})

jQuery筛选方法

jQuery遍历

用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止

遍历-祖先(查找)

1、parent( ) 方法返回被选元素的直接父元素

返回每个<span>元素的直接父元素

$("span").parent();

2、parents( ) 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

返回所有 <span> 元素的所有祖先

$("span").parents();

3、parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

返回介于<span>与 <div> 元素之间的所有祖先元素

$("span").parentsUntil("div");

遍历-后代(查找)

1、children() 方法返回被选元素的所有直接子元素

返回每个<div>元素的所有直接子元素

 $("div").children();

返回类名为 “1” 的所有 <p> 元素，并且它们是<div>的直接子元素

$("div").children("p.1");

2、find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

返回属于<div>后代的所有<span>元素

$('div').find('span')

返回 <div> 的所有后代

 $("div").find("*");

遍历-兄弟(查找)

1、siblings() 方法返回被选元素的所有兄弟元素

返回 <h2> 的所有兄弟元素

$("h2").siblings();

🟢使用可选参数来过滤对兄弟元素的搜索

返回属于 <h2> 的同胞元素的所有<p>元素

$("h2").siblings('p');

2、next() 方法返回被选元素的下一个兄弟元素，该方法只返回一个元素

返回 <h2> 的下一个兄弟元素

$("h2").next();

3、nextAll() 方法返回被选元素的所有跟随的兄弟元素

返回 <h2> 的所有跟随的兄弟元素

$("h2").nextAll();

4、nextUntil() 方法返回介于两个给定参数之间的所有跟随的兄弟元素

返回介于 <h2> 与<h6>元素之间的所有兄弟元素

 $("h2").nextUntil("h6");

🟢prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的兄弟元素（在 DOM 树中沿着兄弟之前元素遍历，而不是之后元素遍历）

jQuery过滤

1、first() 方法返回被选元素的首个元素。

选取首个<div>元素内部的第一个<p>元素

 $("div p").first();

2、last() 方法返回被选元素的最后一个元素。

选择最后一个 <div> 元素中的最后一个<p>元素：

$("div p").last();

3、eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个·<p> 元素（索引号 1）

$("p").eq(1);

4、filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 “url” 的所有 <p> 元素：

 $("p").filter(".url");

5、not() 方法返回不匹配标准的所有元素，not() 方法与 filter() 相反

返回不带有类名 “url” 的所有<p>元素

$("p").not(".url");

6、hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回true

给div里面包含名为protected的元素设置一个动画

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

:checked    选取所有被选中的元素，用于复选框、单选框、下拉框
:selected   选取所有被选中的元素，该选择器只适用于<option>
:focus   选取当前获取焦点的元素
:text    选取所有的单行文本框(<input type="text">)
:password  选取所有的密码框
:input     选取所有的<input>,<textarea>,<select>,<button>元素。
    *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。*
:enable   选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disable   选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
:radio      选取所有的单选框
:checkbox   选取所有的多选框
:submit     选取所有的提交按钮
:image      选取所有的input类型为image的表单元素
:reset   选取所有的input类型为reset的表单元素
:button  选取所有的input类型为button的表单元素
:file    选取所有的input类型为file的表单元素

示例

<ol>
    <li>橘右京</li>
    <li>妲己</li>
    <li class="item">哪吒</li>
    <li>程咬金</li>
    <li>刘备</li>
</ol>
<ol>
    <li>橘右京</li>
    <li>妲己</li>
    <li class="item1">哪吒</li>
    <li>程咬金</li>
    <li>刘备</li>
</ol>
<ol>
    <li>橘右京</li>
    <li>妲己</li>
    <li class="item2">哪吒</li>
    <li>程咬金</li>
    <li>刘备</li>
</ol>
<ul>
    <li>关羽</li>
    <li>张飞</li>
    <li>嫦娥</li>
    <li>杨戬</li>
    <li>典韦</li>
</ul>
<div class="money">我有钱</div>
<div>我没钱</div>

$(function(){
    //1. 查找自身元素之外的所有元素
    $('.item').siblings('li').css('color','blue');
    //2. 查找当前元素之后的同级元素
    $('.item1').nextAll().css('color','red');
    //3. 查找当前元素之前的同级元素
    $('.item2').prevAll().css('color','green');
    //4. 查找第n个元素
    // 方法1
    $('ul li:eq(2)').css('color','#55efc4');
    // 方法2 推荐
    $('ul li').eq(0).css('font-size','30px');
    //5. 判断是否有某个类名
    console.log($('div:first').hasClass('money')); // true
    console.log($('div:last').hasClass('money')); // false
})

jQuery样式操作

操作CSS方法

1.参数只写属性名，则是返回属性值

$(this).css('color');

2.参数是**属性名，属性值，逗号分隔，**是一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css('color',red);

3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({'color':'white','font-size':'20px'})

设置类样式方法

1.添加类(addClass相当于追加类名)

$('div').addClass('current')

2.移除类

$('div').removeClass('current')

3.切换类

$('div').toggleClass('current')

jQuery效果

显示与隐藏

show([speed,[easing],[fn]]) 显示

语法：

show([speed,[easing],[fn]])

显示参数：
1、参数都可以省略,无动画直接显示。
2、speed :三种预定速度之一的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3、easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"Iinear"

4、fn:回调函数,在动画完成时执行的函数,每个元素执行次。

hide([speed,[easing],[fn]]) 隐藏
toggle([speed,[easing],[fn]]) 切换

滑动

与显示隐藏的参数相同

slideDown([speed,[easing],[fn]]) 下滑效果
slideUp([speed,[easing],[fn]]) 上滑效果
slideToggle([speed,[easing],[fn]]) 上下滑动切换效果

事件切换

hover([over,]out)

( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )

动画队列及其停止排队方法

1.动画或效果队列

动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。

2.停止排队
(1 ) stop()方法用于停止动画或效果。
(2) 注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

淡入淡出

fadeln() 淡入效果
fadeOut() 淡出效果
fadeToggle() 淡入淡出切换效果
fadeTo() 渐进方式调整到指定的不透明度

fadeTo([ [speed] , opacity, [easing], [fn]] )

2.效果参数
(1) opacity透明度必须写,取值0~1之间 (必须写)
(2) speed :三种预定速度之-的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)，必须写
(3) easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear”

自定义动画

animate()

语法：

animate (params, [speed] , [easing], [fn])

参数
(1) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

(2) speed :三种预定速度之-的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)，必须写

(3) easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear”

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
 </style>
<body>
 <button>动起来</button>
<div></div>
<script>
    $(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
                opacity: .4,
                width: 500
            }, 500);
        })
    })
</script>
</body>

jQuery属性操作

1、设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href ,比如<input>元素里面的type.

获取属性语法

prop('属性')

设置属性语法

prop('属性','属性值')

2、设置或获取元素自定义属性值 atr()

用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index= “1”

获取属性语法

attr('属性')  //类似原生 getAttribute

设置属性语法

attr('属性','属性值')  //类似原生setAttribute

jQuery事件

事件处理

1、on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

events:一个或多个用空格分隔的事件类型和可选的命名空间

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代

data:当一个事件被触发时要传递event.data给事件处理函数

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false

🟢绑定单一事件

$('h1').on('click', function(){
    console.log(1);
})

🟢绑定多个事件多个事件名之间使用空格隔开

事件对象 event.type 事件类型

$('h1').on('click  mouseover  mouseout', function(e){
 if(e.type == 'click'){
 $(this).css({color:'red'})
}else if(e.type == 'mouseover'){
    $(this).css({background:'green'})
}else if(e.type == 'mouseout'){
    $(this).css({background:'blue'})
 }

事件委托

 $('.wrap').on('click', 'li', function(e){
    //  this 指向委托的元素
    // console.log(this);
    // e.target 事件源对象 
    // console.log(e.target);
    // console.log(e.currentTarget);
})

ZikM_0221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery学习

入口函数$(function(){})1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。2.相当于原生js中的DOMContentl oaded.3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。jquery的顶级对象1.$是jQuery的别称,在代码中可以使用jQuery代替$ ,但一般为了方便,通常都直接使用$.2.$是jQuery的顶级对象，相当于原生JavaScript
复制链接

扫一扫

专栏目录