Python全栈开发之路【第十五篇】：jQuery的介绍和选择器

本节内容

什么是jQuery?

write less,do more.

jQuery是一个快速，小巧，功能丰富的JavaScript库。

它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。

通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

关于jQuery的相关资料：

官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

学习jQuery的目的

学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的API。（什么是API呢?）

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

下载jQuery

到官网下载：http://jquery.com/

jQuery的两大特点

1、链式编程：比如.show()和.html()可以连写成.show().html()。

2、隐式迭代：意思是在方法内部进行循环遍历，而不是我们自己在进行遍历，简化操作。

jQuery的使用步骤

1、引包

2、入口函数

3、功能实现代码 (事件处理)

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

　　注意：导包的代码一定要放在js代码的最上面。

jQuery的入口函数和$符号

入口函数

　　原生js的入口函数指的是：window.onload = function(){ };

window.onload = function(){

    //window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

    //如果不写window.onload() 代码的执行顺序 从上到下

    var oDiv = document.getElementById('box');

    console.log(oDiv);

　　jQuery的入口函数有以下几种写法：

 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(document).ready(function () {

           alert(1);

       })

 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(function () {

           alert(1);

       });

  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。

       $(window).ready(function () {

           alert(1);

       })

jQuery的入口函数与js的入口函数的区别

区别一：书写个数不同：

Js 的入口函数 window.onload 不能同时编写多个，如果有多个window.onload方法，只会执行一个，覆盖。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数 window.onload 是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数 $(document).ready() ，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的$符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了两个变量：$ 和 jQuery。

 <script src="jquery-3.3.1.js"></script>

 <script>

        console.log($);

        console.log(jQuery);

        console.log($===jQuery);

 </script>

打印结果：

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

$实际上表示一个函数名：

 $(); // 调用上面我们自定义的函数$

 $(document）.ready(function(){}); // 调用入口函数

 $(function(){}); // 调用入口函数

 $(“#btnShow”) // 获取id属性为btnShow的元素

 $(“div”) // 获取所有的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。

jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象和jQuery对象的比较

二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>

<div id="app"></div>

<div class="box"></div>

<div class="box"></div>

<div></div>

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("app");           //通过 id 获取单个元素

    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组

    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  //获取的是数组，里面包含着原生 JS 中的DOM对象。

　　console.log($('#app'));

　　console.log($('.box'));

　　console.log($('div'));

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

设置当前div的样式：

$('div').css({

    'width': '200px',

    'height': '200px',

    "background-color":'red',

    'margin-top':'20px'

    })

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

二者的相互转换

1、DOM对象转换为jQuery对象：

$(js对象);

2、jQuery对象转换为DOM对象：

  jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';

$('div')[3].style.backgroundColor = 'green';

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

jQuery的选择器

基础选择器

　　1、id选择器

　　2、标签选择器

　　3、类选择器　

　　4、通配符选择器

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*#brother{

                color: red;

                font-size:24px;

            }*/

        </style>

    </head>

    <body>

        <ul>

            <li id="brother">学校1</li>

            <li><a href="https://www.luffycity.com">学校2</a></li>

            <li class="li3">学校3</li>

            <li>学校4</li>

            <li>学校5</li>

        </ul>

    </body>

    <script src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        //使用jquery的时候 要有入口函数 回调函数

        $(document).ready(function(){

            //基础选择器

            //1.id选择器

            console.log($('#brother'));

            $('#brother').css('color','red');

            //2.标签选择器

            //设置一个值

//            $('a').css('color','yellow')

//          设置多个值 设置多个值得时候使用对象存储 key:value

            $('a').css({'color':'yellow','font-size':'24px'});

            //3.类选择器

            $('.li3').css('background','green');

            //4.通配符选择器 * 使用不是很频繁

            console.log($('*'));

            //清空整个界面的dom元素

            $('*').html('');

        })

    </script>

</html>

示例

层级选择器

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*#brother{

                color: red;

                font-size:24px;

            }*/

        </style>

    </head>

    <body>

        <ul>

            <li id="brother">1</li>

            <li><a href="https://www.luffycity.com">2</a></li>

            <li class="li3">3</li>

            <li>4</li>

            <li>5</li>

        </ul>

        <div id="box">

            <p id="father">天王盖地虎</p>

            <p>我是你老母</p>

            <p>宝塔镇河妖</p>

            <p>蘑菇放香蕉</p>

            <div id="box2">

                <p>小鸡炖蘑菇</p>

            </div>

        </div>

    </body>

    <script src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        //使用jquery的时候 要有入口函数 回调函数

        $(document).ready(function(){

            //1.后代选择器  div p

            $('#box p').css('color','red');

            //2.子代选择器  div > p

            $('#box>p').css('color','yellow');

            //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +

            $('#father+p').css('font-size','30px');

            //4.兄弟选择器 ~

            $('#father~p').css('background','blueviolet');

            console.log($('li'));

            //5.获取第一个元素

            $('li:first').css('font-size','50px');

            //6.获取最后一个元素

            $('li:last').css('font-size','50px');

            $('li:eq(3)').css('font-size','50px');

        })

    </script>

</html>

示例

基本过滤选择器

Python全栈开发之路【第十五篇】：jQuery的介绍和选择器-LMLPHP

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>基本过滤选择器</title>

    </head>

    <body>

        <ul>

            <li>哈哈哈哈，基本过滤选择器</li>

            <li>嘿嘿嘿</li>

            <li>天王盖地虎</li>

            <li>小鸡炖蘑菇</li>

        </ul>

    </body>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //获取第一个 :first ,获取最后一个 :last

            //奇数

            $('li:odd').css('color','red');

            //偶数

            $('li:even').css('color','yellow');

            //选中索引值为1的元素 *

            $('li:eq(1)').css('font-size','100px');

            //大于索引值1

            $('li:gt(1)').css('font-size','50px');

            //小于索引值1

            $('li:lt(1)').css('font-size','12px');

        })

    </script>

</html>

示例

属性选择器

//标签名[属性名] 查找所有含有id属性的该标签名的元素

 $("li[id]").css('color','red')

 //[attr=value] 匹配给定的属性是某个特定值的元素

 $('li[class=what]').css('font-size','30px')

  //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

 $('li[class!=what]').css('color','darkgreen')

//匹配给定的属性是以某些值开始的元素

$('input[name^=username]').css('background','red')

//匹配给定的属性是以某些值结尾的元素

$('input[name$=222]').css('background','yellow')

//匹配给定的属性是以包含某些值的元素

$("button[class*='btn']").css('background','#0000FF')

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <h2 class="title">属性元素器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">分手应该体面</li>

                <li class="what" id="li2">分手应该体面</li>

                <li class="what">分手应该体面</li>

                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked">

                <input name="username1111" type='text' value="1">

                <input name="username2222" type='text' value="1">

                <input name="username3333" type='text' value="1">

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮1</button>

                <button class="btn-success">按钮1</button>

                <button class="btn-danger">按钮1</button>

            </form>

        </div>

    </body>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

//            标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

//            匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

</html>

示例

筛选选择器

//获取第n个元素 数值从0开始

$('span').eq(0).css('font-size','30px')

//first()获取第一个元素

$('span').first().css('background','red')

//last()获取最后一个元素

//.parent() 选择父亲元素

$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})

//.siblings()选择所有的兄弟元素

$('.list').siblings('li').css('color','red')

//.find()

//查找所有的后代元素

$('div').find('button').css('background','#313131')

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <p class="p1">

                <span>我是第一个span标签</span>

                <span>我是第二个span标签</span>

                <span>我是第三个span标签</span>

            </p>

            <button>按钮</button>

        </div>

        <ul>

            <li class="list">2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </body>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        //获取第n个元素 数值从0开始

        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  ：get方法 和set方法

        console.log($('span').last());

        $('span').last().css('color','greenyellow');

        console.log($('span').parent('.p1'));

        $('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'});

        //.siblings()选择所有的兄弟元素

        $('.list').siblings('li').css('color','red');

        //.find()

        //查找所有的后代元素

        $('div').find('button').css('background','yellow')

    </script>

</html>

示例

uery的