jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

原创最新推荐文章于 2023-07-07 14:28:52 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

一、jQuery概述

1、JavaScript库（library，里面有很多函数）

常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，学习 jQuery 本质：学习调用这些函数（方法）

2、jQuery使用步骤

1）引入jQuery文件（head标签里面引入）

<script type="text/javascript" src="jquery.min.js"></script>

2）使用

<style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
</style>

隐藏div

//方法1：
<body>
    <div></div>
    <script>
        $('div').hide();
    </script>
</body>

//方法2 等着页面DOM加载完毕再去执行js代码
<body>
    <script>
        $(document).ready(function() {
            $('div').hide();
        })
    </script>
    <div></div>
</body>
//方法2 等价方法
    <script>
        $(function() {
            $('div').hide();
        })；
    </script>

3、jQuery的入口函数

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

4、jQuery的顶级对象$ $等价于jQuery

5、jQuery对象和DOM对象

    <div> </div>
    <span></span>
    <script>
        // 1、 DOM对象： 用原生js获取的对象
        var myDiv = document.querySelector('div'); //myDiv是DOM对象
        var mySpan = document.querySelector('span');
        console.dir(myDiv);
        console.dir(mySpan); // console.dir(myDiv, mySpan);只能单独打印，这种是错误的
        /* 2、 jQuery对象： 用jQuery方式获取的对象 
        本质： 通过$把DOM元素进行了包装 产生的对象（伪数组形式存储） */
        $('div'); //$('div')是一个jQuery对象
        $('span');
        console.dir($('div'));
        // 3、jQuery对象只能使用jQuery方法   DOM对象则使用原生的JavaScript属性和方法
        myDiv.style.display = 'none'; //myDiv是DOM对象
        //$('div').style.display = 'none'; $('div')是jQuery对象不能使用原生js的属性和方法
        $('div').hide(); //$('div')是jQuery对象  用jQuery方法
        // myDiv.hide(); myDiv是DOM对象不能用jQuery方法
</script>

jQuery对象和DOM对象相互转换

    <video src="image/love.mp4" muted width="200px"></video>
    <script>
        // 1、DOM对象转换为jQuery对象
        // 1）直接获取视频得到jQuery对象
        $('video');
        // 2）使用原生js获取DOM对象 再转换为jQuery对象：$(DOM对象)
        var myVideo = document.querySelector('video');
        $(myVideo);
        // console.dir(myVideo);    myVideo是DOM对象
        // console.dir($(myVideo));  $(myVideo)是jQuery对象
        // $(myVideo).play();没有效果 jQuery里面没有paly方法
        /* 2、 jQuery对象转换为DOM对象  
        方法：jQuery对象[index] 或者 jQuery对象.get(index)  index是索引号 */
        myVideo.play(); //DOM对象使用play方法
        $('video')[0].play(); //jQuery对象转换为DOM对象后使用play方法  只有一个video标签 所以index=0
        $('video').get(0).play(); //jQuery对象转换为DOM对象后使用play方法
    </script>

二、jQuery选择器

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

名称	用法	描述
ID选择器	$(’#id名’)	获取指定ID的元素
全类选择器	$(’*’)	匹配所有元素
类选择器	$(’.类名’)	获取同一类class的元素
标签选择器	$(‘标签名’)	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素