JQuery

最新推荐文章于 2022-08-08 14:33:34 发布

今天晚上一定要早睡

最新推荐文章于 2022-08-08 14:33:34 发布

阅读量312

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_48192192/article/details/120322211

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery

jQuery是一个JavaScript库，将js中的DOM操作进行了封装，可以快速查询并使用里面的功能。
跨浏览器兼容，兼容主流浏览器。
免费，开源。

1. jQuery基本使用

1.1jquery引用

本地使用：引入js文件
< script src="./js/jquery-3.5.1.min.js"></ script >
cdn引用: 直接复制链接
< script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js”></ script>

1.2 查找dom

jQuery([selector,[context]]) 返回jQuery；
$ 相当于 jQuery，是jQuery的别称；
$ 是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
$ ( ) 括号里通常为由css选择器组成的表达式。
默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素

<body>
    <div id="a1">今天天气很好，小没哭了</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
    	console.log($('#a1'));
    </script>
 </body>

1.3 dom对象和jquery对象

DOM对象：用原生js获取的对象；
jQuery对象：用jQuery方式获取的对象；
jQuery对象的本质是：利用$对DOM对象包装后产生的对象（以伪数组形式存储）；
jquery对象才能使用jquery方法，DOM对象只能使用原生的JavaScript属性和方法

dom对象转换为jquery对象：

$ ( DOM对象 )

 <script>
     	var a1=document.getElementById('a1'); //dom对象
         console.log($(a1));  //通过 $ ( )转化为jQuery对象(只有jquery对象才能使用jquery方法)
  </script>

jQuery对象转换为DOM对象: （可以使用javascript方法）

$ (‘div’)[index];

$(‘div’).get(index);

 <video src=""></video>
 <script>
 $('video')[0].play(); //DOM对象转为jQuery
 $('video').get(0).play(); 
 </script>

1.4 创建元素

<script>
    	$('<div id="a2">hello</div> ').appendTo(a1);  //将hello追加到a1中
</script>

1.5 通过回调产生异步效果

$(function(){
            //效果与window.onload相似
})

1.6 each()

each() 以每一个匹配的元素作为上下文来执行一个函数。

<body>
    <ul>
        <li id="">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
    	$('ul li').each(function(i){
            console.log(i);
            $(this).css('background','red')
            $(this).css('listStyle','none')
		})  
    </script>
 </body>

1.6 length

length jQuery 对象中元素的个数。

console.log($('ul li').length)

1.7 get([index])

get([index]) 取得其中一个匹配的元素。

//get() 取得其中一个匹配的元素,返回DOM对象，不能直接使用jquery方法，$()将DOM元素转为jquery元素
 $( $ ('ul li').get(1)).css('background','green')

1.8 index()

index() 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

//index() 返回一个元素的索引
$('ul li').each(function(i){
      console.log( $(this).index())  
 })

1.9jQuery入口函数

等DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕。
相当于原生js的DOMContentLoaded。
和原生js的load事件不同，load事件是等页面文档，外部js文件，css文件和图片加载完毕后才执行内部代码

$(document).ready(function(){
	})
或
$(function(){
	... //此处是页面DOM加载完成的入口
} );

2. jQuery 选择器

$(" 选择器 ")

隐式迭代：将匹配到的所有元素内部进行遍历循环；
给匹配到的所有元素进行循环遍历。

#id
标签
. class
*所有元素
多个选择器之间用逗号隔开
后代选择器祖先后代（空格隔开）
子选择器父亲>儿子
prev+next 紧跟在prev后面的第一个选择器
prev~sibling prev后面的所有选择器
：first 获取匹配的第一个元素
: first-child 匹配所有给定选择器的第一个子元素
：last 获取匹配的最后一个元素
: last-child 匹配所有给定元素的最后一个子元素
：nth-child 匹配所有给定元素的第n个元素
：not（）去除所有和给定选择器匹配的元素
：even 匹配所有索引值为偶数的元素，从 0 开始计数
：odd 匹配所有索引自为奇数的元素
：eq(index) 匹配一个给定索引值的元素
：gt(index) 匹配所有大于给定索引值的元素
：lt(index) 匹配所有小于给定索引值的元素
：header 匹配所有标题元素（h1,h2,h3）
：focus 匹配当前获取焦点的元素
：target 选择目标元素
：contains（text）匹配包含给定文本的元素
：empty 匹配所有不包含子元素或文本的空元素
: has(selector) 选择含有指定元素的元素
. parent() 匹配含有子元素或文本的元素（非空元素）
. children() 亲儿子
. find() 匹配元素的所有孩子（类似于后代选择器）
：hidden 匹配所有隐藏的元素
：visible 匹配所有显示的元素
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配所有给定属性是特定值的元素
[attribute!=value] 匹配所有属性不等于指定值的元素
[attribute^=value] 匹配所有属性以指定值开始的元素
[attribute$=value] 匹配所有属性以指定值结束的元素
[attribute*=value] 匹配所有属性包含指定值的元素
[ selector1 ] [ selector2 ] [selectorN] 复合属性选择器
：only-child 匹配父元素中只有一个子元素的元素
：input 匹配所有的input元素（input，textarea，select，button）
：text 匹配所有的input中的单行文本框元素
：enabled 匹配所有可用的元素
：disabled 匹配所有不可用元素
: checked 匹配复选框单选框元素
: slected 匹配select中的option元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $('li').css('listStyle','none');
        $('li:first').css('color','red');  //:first 只匹配第一个  只在第一个ul中查找第一个li
        $('li:first-child');  //:first-child 在每一个ul中查找第一个li
        $('li:last').css('color','green');  
        $('li:last-child'); 
        $('li:nth-child(1)');  //:nth-child(n)  在每一个ul中查找第n个li
        $('li:even').css('background','palegreen');  //even索引为偶数
        $('li:odd').css('background','violet');   //odd索引为奇数
        $('li:eq(2)').css('background','pink'); //:eq(index) 选中某一个索引
        $('li:gt(3)').css('background','deeppink'); //:gt(index) 匹配大于该索引的元素
        //:lt(index)匹配所有小于该索引的元素
        //:header标题元素
        $(':header');  //返回所有标题元素
        //:root 选择文档根元素
        //:empty 空元素 没有子元素或文本的空元素
        $('div:has(p)'); //:has(元素）返回所有div中含有p的div元素
        //:parent  非空元素
        //:hidden  不可见元素（隐藏元素）
        //:visible 可见元素
        //[]  匹配包含给定属性的元素
        $('div[id]');//返回所有div中含有id属性的div
        $('div[id=a1]');
        $('div[id!=a1]');  //不等于
        $('div[id^=a1]');  //开头
        $('div[id$=a1]');  //结尾
        $('div[id*=a1]');  //包含
        $('div[id=hello][clss=red]');  //匹配多个属性,复合写法
        //:only-child 找到有唯一子元素的父元素
        $(':input')  //获取到所有的input元素（包括input.textarea,select,button）
        $(':text');  //获取所有的input中的text元素
        //:disabled  不可用元素
        //:enabled  可用元素
        //:checked  复选框单选框
        //:slected  匹配select中的option
   </script>
</body>

3.属性

attr() 设置或返回被选元素的属性值，可以同时设置多个属性，用逗号隔开
removeAttr() 删除元素的某个指定属性
prop() 设置或获取元素固有属性值
removeProp(）删除prop设置的属性
addClass() 给匹配元素添加指定类名
removeClass() 将匹配元素的类名删除
toggleClass() 若不存在指定类则添加该类，若存在该类则删除
html() 获取匹配元素的html内容（HTML元素，标签）
text() 获取匹配元素的所有文本内容
val() 获取匹配元素的当前值

<script>
        console.log($('#a1').attr('title'));  //获取a1元素的title属性
        // attr() 设置属性
        $('#a1').attr('class','red');
        //一个设置多个属性
        $('#a1').attr({
            class:'blue',
            title:'xiaomei'
        })
        //removeAttr()删除属性
        $('#a1').removeAttr('title');  //删除一个元素的某个属性
        //prop() 返回在匹配元素集合中第一个元素的属性值
        //removeProp() 删除prop（）设置的属性
        $('#a1').addClass('big'); //addClass()  为匹配元素添加指定类名
        $('#a1').removeClass('blue');  //removeClass()删除某一个元素的类
        $('#a1').toggleClass('blue');  //toggleClass()如果存在该类则删除，如果不存在则追加
        console.log($('#a2').html());  //html()返回该元素中的HTML元素
        $('#a2').html('<p>hello world</p>'); //替换
        console.log($('#a2').text());  //text()返回该元素中所有的文本元素
        //val() 元素的值
    </script>

4.css

css() 返回匹配元素的样式属性或设置匹配元素的css样式
hide() 返回隐藏的元素
show() 返回显示的元素
offset() 获取元素在当前视口的相对偏移
position() 获取元素相对于父元素的偏移（当元素没有父元素时，相对于body）
scrollTop() 获取匹配元素相对于当前元素滚动条顶部的偏移
scrollLeft() 获取匹配元素相对于当前元素滚动条左侧的偏移
height() 获取匹配元素当前计算的高度值（px）
width() 获取匹配元素当前计算的宽度值
innerHeight() 获取第一个匹配元素内部区域高度（包括补白，不包括边框）
innerWidth() 获取第一个匹配元素内部区域宽度（包括补白，不包括边框）
outerHeight() 获取第一个匹配元素外部高度（默认包括补白和边框）
outerWidth() 获取第一个匹配元素外部宽度

<body>
    <div id="a1"></div>
    <!-- <script src="./js/jquery-3.5.1.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        console.log($('#a1').css('color')); //获取css属性值
        $('#a1').css('color','green'); //单个设置css属性，属性名加引号
        $('#a1').css({
            width:'200px',
            height:'200px',
            backgroundColor:'pink'
        }) //同时设置多个元素的css属性值 复合属性采用驼峰命名法，属性名不用加引号，若值不是数值需要加引号
        $('#a1').hide();  //隐藏元素
        $('#a1').show();  //显示元素
        //offset 获取匹配元素在当前视口的相对偏移
        var offset=$('#a1').offset();
        console.log(offset);
        //position 获取元素相对于父元素的偏移
        var p=$('a1').position();
        console.log(p); //没有父元素则相对于body
        //scrollTop()获取匹配元素相对于滚动条顶部的偏移
        // $('#a1').scrollTop(300);
        
        //获取元素的宽度和高度
        console.log($('#a1').width());
        console.log($('#a1').height());

        //innerHeight() 获取元素的内部区域高度（包括补白，不包括边框）
        //outerHeight()获取元素的外部高度（默认包括补白和边框）
        
    </script>
</body>

tab栏切换案例

<script>
        $(function(){
            $(".tab_list li").click(function(){
                $(this).addClass("current").siblings().removeClass("current");
                var index=$(this).index();
                $(".tab_con .item").eq(index).show().siblings().hide();
            })
        })        
</script>

jQuery排他思想
链式编程
节约代码量，使代码更优雅

$(this).css('color','red').sibling().css('color','');
//该元素的颜色为红色，该元素的兄弟元素的颜色为空
$(this).css('color','red');
$(this).sibling().css('color','');

链式编程要注意是哪个元素执行样式。

5.事件

JS中的所有事件在jQuery中都可以使用

ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件处理函数（同低版本的bind()）
off(events,[selector],[data],fn) 在选择元素上移出一个或多个事件的事件处理函数
one(type,[data],fn) 给匹配元素的特定事件绑定一个一次性事件处理函数
trigger() 在指定元素上模拟触发某类事件，自动执行事件
hover() 模仿悬停事件
toggle() 若元素隐藏则显示，如果元素显示则隐藏，可以设值，缓慢变化有动画效果
blur() 当元素失去焦点时触发
change() 当元素值发生改变时触发事件
click() 触发每一个匹配元素的click事件
……

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id="btn">按钮</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(document).ready(function(){});
        $(function(){});  //等效
        //点击li弹出对应的内容
        on() 将元素绑定一个或多个事件处理函数  同低版本的bind()
         $('ul li').on('click',function(e){
             console.log($(this).text());
         })
         
        $('ul').append('<li>4</li>'); //追加子元素
        //事件代理
        $('ul').on('click','li',function(e){
            // console.log($(this).text());
            // console.log(e.target.innerText);
            console.log($(e.target).text());
        })
    </script>
</body>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id="btn">按钮</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        //off() 事件解绑
        $('ul').off();  //将ul上的所有事件解绑
        $('ul').off('click'); //将ul上的click事件解绑
        
        //one() 给元素绑定一个一次性事件
        //trigger() 模拟触发某类事件 自动执行事件
        $('#btn').one('click',function(){  //执行一次后失效
            console.log(111);
        }).trigger('click')

        //hover 模拟悬停效果 hover(函数1，函数2) 移入移出时效果
        $("#btn").hover(function(){
            $(this).addClass('red');
        },function(){
            $(this).removeClass('red');
        });

        //toggle() 隐藏和显示  若元素隐藏则显示，如果元素显示则隐藏。可以传值，变化时有动画效果
        $('#btn').toggle(2000); //按钮消失
        $('#btn').toggle(2000); //按钮显示

        //js中的所有事件在jquery中都是有的
        $('div').click(function(){});  //绑定click事件
    </script>
</body>

6.文档处理

append () 向每个匹配的元素内部后面追加内容。
appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合后。
prepend() 向每个匹配的元素内部前置内容。
prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
after() 在每个匹配的元素之后添加兄弟元素。
before() 在每个匹配的元素之前插入兄弟元素。
insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
wrap() 把每个匹配的元素用其他元素的结构化标记包裹起来。
unwrap() 这个方法将移出元素的父元素.
wrapAll() 将所有匹配的元素一起用单个元素包裹起来
wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素。
empty() 删除匹配的元素集合中所有的子节点。
remove() 从DOM中删除所有匹配的元素，事件和数据都不保留
detach() 从DOM中删除所有匹配的元素，保留事件和数据
clone() 克隆匹配元素

<body>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div id="a1"></div>
    <li>4</li>
    <li>5</li>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        //append 在末尾追加元素
        $('#a1').append('<p>111</p>');
        //appendTo 创建后追加在末尾
        $('<p>222</p>').appendTo('#a1');
        //往前追加元素
        $('#a1').prepend('<p>333</p>');
        //创建元素后往前追加元素
        $('<p>444</p>').prependTo('#a1');
        //after() 往匹配元素的后面追加兄弟元素
        $('#a1').after('<p>555</p>');
        //before() 往匹配元素的前面追加兄弟元素
        $('#a1').before('<p>666</p>');

        //wrap() 给每个匹配元素包裹指定元素
        $('li').wrap('<ul></ul>'); //使用Ul标签将每一个li包裹起来
        //unwrap() 拆除匹配元素的父标签
        $('li').unwrap();
        //wrapAll() 将所有匹配元素用指定元素包裹起来
        $('li').wrapAll('<ul></ul>');
        //replaceWith() 将匹配元素替换成指定元素
        $('p').replaceWith('<b>hello</b>');
        //empty() 删除匹配的元素集合中的所有子节点
        $('#a1').empty();  //清空
        //remove() 将匹配到的元素删除 ,事件和数据都不保留
        $('p').remove();
        //detach() 保留事件和数据
        $('p').detach();
        //clone() 克隆
        $('b').clone(); //无参数，会克隆元素，事件不会被克隆
        $('b').clone(true); //有参数时事件也会被克隆
    </script>
</body>

7.效果

显示和隐藏

show() 显示隐藏的匹配元素，可以添加效果的时间（ms）或速度（fast,slow,normal）和动画完成时执行的函数
hide() 隐藏显示的元素
toggle() 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

滑动

slideDown() 元素高度向下增大
slideUp() 元素高度向上减小
slideToggle() 通过高度变化切换匹配元素的可见性

淡入淡出

fadeIn() 淡入效果
fadeOut() 淡出效果
fadeTo() 将匹配元素的不透明度以渐进方式调整到指定不透明度参数速度和不透明度必须写
fadeToggle() 通过不透明度变化改变元素淡入淡出效果

自定义动画

stop() 停止所有在指定元素上正在运行的动画
delay() 设置一个延时推迟效果
animate() 创建自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a1{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
            width: 400px;
            height: 400px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <div id="a1"></div>
    <button id="btn">改变</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        //show() 显示 括号里可以写数字或字符串(slow,fast,normal)，在指定时间内缓慢出现
        $('#btn').on('click',function(){
            $('#a1').show(500,function(){  //显示
                $('#a1').hide(500,function(){ //隐藏
                    $('#a1').toggle(500,function(){  //取反
                        $('#a1').slideUp(500,function(){ //高度向上
                            $('#a1').slideDown(500,function(){ //高度向下
                                $('#a1').fadeOut(500,function(){  //淡出
                                    $('#a1').fadeIn(500) //淡入
                                })
                            })
                        })
                    });
                });
            });
        })
        //hide() 隐藏
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a1{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgb(245, 90, 116);
        }
    </style>
</head>
<body>
    <div id="a1"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $("#a1").animate({
            left:'200px',
            bottom:'400px'
        },500).animate({
            left:'400px',
            bottom:'0px'
        },500).animate({
            left:'0px',
            bottom:'200px'
        },500).animate({
            left:'400px',
            bottom:'200px'
        },500).animate({
            left:'0px',
            bottom:'0px'
        },500)
    </script>
</body>
</html>

8.筛选

eq() 获取第n个jquery对象
filter() 筛选出与指定表达式匹配的元素集合
map() 将一组元素转换成数组
has() 保留包含特定后代的元素
not() 从元素集合中删除与表达式相匹配的元素
slice(start_index,end_index) 选取匹配的子集
children() 获取一个元素中所有符合条件的子元素集合（括号中无表达式时返回所有子元素的集合）
find() 查找父元素中匹配的子元素

<body>
    <ul >
        <li>1</li>
        <li>2</li>
        <li class="red">3</li>
        <li>4</li>
    </ul>
    <div id="a1"></div>
    <div id="a2"><p></p></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $('li').eq(1).css('background','pink'); //获取第n个对象
        //filter() 与指定表达式匹配的元素
        $('li').filter('.red').css('color','red');
        //not() 将匹配元素中删除与指定表达式匹配的元素
        //has() 选中含有指定后代的元素
        console.log($('div').has('p'));
        //map() 将一组元素转换为数组
        //将元素进行遍历
        $('li').map(function(i){
            console.log($(this).text());
        })
        //sclice(start_index,end_index) 获取匹配元素的子集 
        console.log($('li').slice(0,2));
        //children()  获取一个元素时中所有的子元素集合
        $('div').children(); 
        $('div').children('.red'); //可以传入过滤表达式,获取满足条件的子元素
        //find() 查找父元素中的某些子元素
        $('div').find('p');
    </script>
</body>

今天晚上一定要早睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

jQuery1. jQuery基本使用1.1jquery引用1.2 查找dom1.3 将dom对象转化为jquery对象1.4 创建元素1.5 通过回调产生异步效果1.6 each()1.6 length1.7 get([index])1.8 index()2. jQuery 选择器3.属性4.css5.事件1. jQuery基本使用1.1jquery引用本地使用：引入js文件< script src="./js/jquery-3.5.1.min.js"></ script &
复制链接

扫一扫