jQuery

最新推荐文章于 2024-07-30 22:36:34 发布

百年前我叫半仙

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量205

点赞数

分类专栏： JavaScript 文章标签： js jquery javascript vscode

本文链接：https://blog.csdn.net/weixin_50970194/article/details/119420313

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript库

封装了函数或者方法的一种“集合”
其中的jQuery快速操作DOM

jQuery API速查文档

一、jQuery

优点

本页面PPT均来自pink老师课件

二、jQuery的基本使用

1.jQuery的入口函数

    <script>
        / 1. $('div').hide();这样写div盒子还存在
        
        / 2. $(document).ready(function(){
        /     $('div').hide();
        / })				js写在前还正常执行的第一种写法
        
        / 3. $(function(){
            $('div').hide();
        })					js写在前还正常执行的推荐写法
    </script>
    
    <div></div>

在这里插入图片描述

2.jQuery的顶级对象$

1.是jQuery的别称
2.是jQuery的顶级对象，相当于原生js的windows

3.jQuery对象和DOM对象

1.原生js获取过来的是DOM对象
2.jQuery获取过来的是jQuery对象，还顺带包装成伪数组的形式
3.DOM和jQuery各自有自己的方法和属性，不能混用，会报错的

在这里插入图片描述

三、jQuery常用API

1.jQuery选择器

普通选择器

写法和document.querySelector('')类似
$('');
层级选择器的写法：$('ul li');/$('ul>li');

隐式迭代：遍历内部DOM元素（jQuery获取后返回的是一个伪数组），对每个对象
执行相应操作

筛选选择器

<ul>
        <li>34567</li>
        <li>5364785</li>
        <li>5364785</li>
        <li>5364785</li>
        <li>5364785</li>
    </ul>
    <script>
        $(function() {
            $('ul li:first').css('color','yellow');选择第一个
            $('ul li:last').css('color','red');选择第二个
            $('ul li:eq(2)').css('color','skyblue');选择索引号为2的（索引号从0开始）
            $('ul li:odd').css('color','skyblue');选择索引号为奇数
            $('ul li:even').css('color','red');选择索引号为偶数
        })
    </script>

筛选方法

    <div class="father">
        <div class="son"></div>
    </div>
    
    $(function() {
        $('.son').parent().css('color','red');
    })

排他思想

    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    
    <script>
        $(function(){
            $('button').click(function(){
                $(this).css('color','red');
                console.log($(this).index());/获取被点击的按钮的索引号
                $(this).siblings('button').css('color','');/其他兄弟元素不变

				//链式编程的写法实现上面功能	
				/$(this).css('color','red').siblings().css('color','');
            })
        })
    </script>

2.jQuery样式操作

操作css方法
设置类样式方法

	切换类——没有则加上，有则去掉

类操作与className区别

原生js的className会覆盖原来的
但jQuery的类操作不会，它是追加类或者是删除指定的类

3.jQuery效果

页面所有PPT来自pink老师

hover()表示鼠标经过和离开两者都有
//鼠标经过展示：
            $('.mi>li').hover(function() {
                $(this).children('ul').slideDown(2000);
            },function() {
                $(this).children('ul').slideUp(10);
            })
//这样简化了上面的代码
            $('.mi>li').hover(function() {
                $(this).children('ul').stop().toggle();/把stop写
                在前面，停止上一次动画
            })

在这里插入图片描述

自定义动画animate，添加的是对象

    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left:200,
                    top:300,
                    opacity:.3,
                },1000)
            })
        })
    </script>
    <button>one</button>
    <div></div>

mouseenter() 会在鼠标时经过触发

4.jQuery属性操作

prop()获取自带属性并且可以改变属性值
attr()获取自定义属性并且可以改变属性值

    <a href="http://www.baidu.com">zheli</a>
    <input type="checkbox" checked="checked">
    <script>
        $(function() {
            console.log($("a").prop("href"));
            $("a").prop("title","good");
            $("input").change(function() {
                console.log($(this).prop("checked"));/值是布尔类型的
            }) 
        })
    </script>

data() 获取属性值

1.h5的自定义属性写法时data直接获取
2.对自定义属性赋值时值是存储在缓存中，刷新了就没了，而且元素控制台还看不到
    <input type="checkbox" name="" id="iput">
    <script>
        $(function() {
            $("#iput").data("name","andy");
            console.log($("#iput").data("name"));
        })
    </script>

控制台展示如下
在这里插入图片描述

change()方法获取元素状态是否变化

5.内容文本值

1.html() 相当于原生js的innerHTML(),获取元素内容（识别标签）
html()				获取值
html("...")			改变值

2.text() 相当于原生js的innerText()，获取元素文本内容（不识别标签）
text()				获取值
text("...")			改变值

3.val()相当于原生js的value(),获取表单值
val() 				获取值
val("...")			改变值

6.元素操作

遍历元素——给同一类元素做不同操作

在这里插入图片描述

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <input type="text">
    <script>
        var attr = ["red","green","skyblue"];
        var sum = 0;
        $(function() {
            $("div").each(function(index,elem) {
                console.log(index);
                $(this).css("color",attr[index]);
                sum += parseInt($(elem).text());
            })
            $("input").val(sum);
        })
    </script>

创建、添加、删除元素

    <script>
        var li = $("<li>555</li>");     //创建元素
        var div = $("<p>100</p>");
        $(function() {
            / $("ul").append(li);/添加子元素在最后面
            / $("ul").prepend(li);/添加子元素在最前面
            / $("div").before(div);/添加兄弟元素在前面
            / $("div").after(div);/添加兄弟元素在后面
            / $("ul").remove();/移除ul
            / $("ul").empty();/清空ul，只留下ul标签
            / $("ul").html("");/清空ul，只留下ul标签
        })
    </script>
    <ul>
        <li>233</li>
    </ul>
    <div>hao out are you</div>

7.尺寸、位置操作

可于jQuery文档搜索尺寸、位置
在这里插入图片描述

8、其他

节流阀/互斥锁的思维解决两事件相互触发的情景

var flag = true;

四、jQuery事件

1、常见事件

1.单个事件注册
$("").事件(function() {

     })

2.事件处理
（1）on绑定一个或者多个事件
	$("div").on({
                click : function() {
                    $(this).css("backgroundColor","skyblue");
                },
                mouseover : function() {
                    $(this).css("backgroundColor","red")
                }
	})
如果事件处理程序相同，可以这样写
            $("div").on("mouseenter mouseover",function() {
                $(this).toggle();
            })
（2）可以委派事件给父元素,给父元素绑定事件，但触发事件的是子元素
    <ul>
        <li>233</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
            $("ul").on("click","li",function() {
                alert('hi');
            })
    </script>
（3）给动态创建的元素也可以添加事件
    <script>
        $(function() {
            $("ul").on("click","li",function() {
                alert('hi');
            })
            var li = $('<li>jij</li>');
            $("ul").append(li);

        })
    </script>
    <ul>
        <li>hao</li>
        <li>en</li>
    </ul>
3.off() 方法移除用.on()绑定的事件处理程序，可以有回调函数
	$("").off()  				 解绑所有事件
	$("").off("click")			 解绑对应事件
	$("ul").off("click","li")	 解绑事件委托
4.one() 绑定一次性事件，语法和 on()一样
5.自动触发事件
/自动触发点击事件
（1）$("div").click();
（2）$("div").trigger("click");
（3）$("div").triggerHandler("click");//但不会触发默认行为

2.事件对象

在这里插入图片描述

五、jQuery其他方法

1.jQuery对象拷贝

在这里插入图片描述

2.多库共存

在这里插入图片描述

3.jQuery插件

就是找想要的效果，然后参照源代码复制、粘贴、修改
在这里插入图片描述

百年前我叫半仙

关注

0
点赞
踩
0

收藏

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

JavaScript库封装了函数或者方法的一种“集合”其中的jQuery快速操作DOM一、jQuery优点jQuery的入口函数 <script> / 1. $('div').hide();这样写div盒子还存在 / 2. $(document).ready(function(){ / $('div').hide(); / }) js写在前还正常执行的第一种写法 .
复制链接

扫一扫