jquery

day49

一丶什么是JQuery

JQuery:

JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率

js库是包含了把复杂的功能封装到简单的方法中

JQuery的两大特性:

链式编程:可以.的形式实现多个功能

隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用

更好的兼容性:JQuery自动做了浏览器的兼容问题

JQuery的引入:

压缩(XXX.min.js)与未压缩

// 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高

// 2. 未压缩的文件占据空间,不利于网络传输,可读性高

引入:导入文件一定要在自定义script标签之上

<!-- 导入文件一定要在自定义script标签之上 -->
<!-- 引入Jq文件 -->
    <script src="jquery3.4.1.min.js"></script>

    <script>
        // 自定义JQ/js代码
    </script>



//在控制台输入jQuery
    //结果如下,则表示引入JQ成功
    ƒ (e,t){return new k.fn.init(e,t)}

相比较下,Js原生的效率要高于JQuery的效率,有时候需要写大量的原生js代码,提高执行效率.

二丶JQuery的入口函数和$符

入口函数:

/* 文档加载完毕 */
    //方式一:
        $(document).ready(function(){
            //文档加载完毕
            alert('加载完毕');
        });

    //方式二:
        $(function(){
           //文档加载完毕 
            alert('加载完毕');
        });
    
    //方式三:
        $(window).ready(function(){
            //文档加载完毕
            alert('加载完毕');
        });

JQ入口函数和js入口函数对比

/* 区别一:书写方式不一样 */
    //js的入口函数只能书写一次,多次会存在 事件 覆盖现象
    //jq的入口函数可以出现多次,不限次数

/* 区别二:执行时机不同 */
    //js的入口函数是在所有的文件资源加载完毕之后,才执行.资源包括:页面文档,外部的js文件,外部的css文件,图片等.  (dom树资源加载完毕+文件资源加载完毕)

    //JQuery的入口函数,是在文档加载完成后就执行.即Dom树加载完成之后就可以操作dom.不要等到外部所有的资源都加载完毕. (dom树资源加载完毕)


/* 相同: */
    //文档的加载顺序:从上到下下,边解析边执行

JQuery的$

$和jQUery具有一样的意义,是jQUery占用了这两个变量

//jQUery+() :  实例化一个JQ对象
    jQuery('#id')
    k.fn.init {}

//$+() : 实例化一个JQ对象
    $('#id')
    k.fn.init {}

//判断$符和jQuery的值和类型是否相同
    $===jQuery
    true

//总结: jQuery和$符就是一个变量,存放类地址

三丶JQuery和JS的Dom对象对比

区别:

jQuery获取元素的jq对象,包括dom树,还有一些方法

原生js只获取dom对象

/* js获取对象 */
    // id选择器,类选择器,标签选择器
        document.getElementById('app')
        // 直接获得一个标签对象
            <div id="app">

/* jQuery获取jq对象 */
    // id选择器,类选择器,标签选择器
        $('#app')
        // 获取一个jq对象,包括一些方法
            Object [ div#app ]  <prototype>:Object { jquery: "3.4.1", constructor: k(), length: 0, … }

相互转换:

/* jQuery对象 转换成 js对象 */
        
    //方式一: jQuery对象[index];   index为索引,推荐此方式
        var obj=$('#sel');
        jQuery[0];   //js对象

    //方式二: jQuery对象.get(index);
        var obj=$('#sel');
        obj.get(0);   //js对象

/* js对象 转换成 jQuery对象 */
    //方式一 : $(js对象)
    var p_obj=document.getElementById('p1');
    $(p_obj);  //JQ对象


    //方式二 : jquery(js对象)
    var p_obj=document.getElementById('p1');
    jquery(p_obj);  //JQ对象

四丶JQuery的选择器

基本选择器:

<body>
    <div>
        <input type='text' id='inp' class='inp-class' />
    </div>
</body>
 

/* id选择器 */
    //语法 : $('#id');
    var id=$('#inp');//得到一个对象


/* 标签选择器 :tagName代表标签名*/
    //语法 :$('tagName')
    var inp_tag_attr=$('input');//得到一个数组
    

/* 类选择器  : className */
    //语法 :$('.className')
    var inp_cls_attr=$('.inp-class');//得到一个数组



/* 通配符选择器 */
    //语法 :$('*')
    var all_attr=$('*');


/* 交集选择器 */
    //语法 :$('div.inp-class')
    var attr1=$('div.inp-class'); //得到一个数组

/* 并集选择器 */
    //语法 :$('#inp.inp-class')
    var el=$('#inp.inp-class');

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');
            //操作标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);
            //操作类选择器(隐式迭代，不用一个一个设置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操作id选择器
                    jqBox1.css("background", "yellow");

        })
    </script>

</body>
</html>

层级选择器:

/* 后代选择器: 空格  */   
	// 语法: $('x y');   
	// 找到 X标签 的所有的后代(子子孙孙) y标签
	

/* 儿子选择器: 大于号 */
	// 语法: $('x > y');
	// 找到 x标签 的子标签(儿子,嵌套标签) y标签


/* 毗邻(兄弟)选择器: 加号 ( 必须是相邻的才会被找出来) */
	// 语法: $('x + y');
	// 找到 x标签下的 紧密相邻的元素 y标签

/* 弟弟选择器: 波浪号 */  
	// 语法: $('x ~ y');
	// 找出 x标签下 所有的弟弟的 y标签

示例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

属性选择器:

$('[href]');   //找到所有含有href属性的标签


$('tag[href]');  //找到所有tag标签且包含href属性的标签 


$('选择器[属性名="abc"]'); //找到所有 选择器且 属性名的值为abc  的标签


$('选择器[属性名$="abc"]'); //找到所有 选择器且 属性名的值为abc结尾 的标签


$('选择器[属性名^="abc"]'); //找到所有 选择器且 属性名的值为abc开头 的标签


$('选择器[属性名*="abc"]'); //找到所有 选择器且 属性名的值含有abc 的标签


$('选择器[属性1][属性名2="abc"]'); //拥有属性1,且属性二的值='xxx',符合前面选择器要求 的标签