开发 python开发-JQuery

python开发-JQuery

介绍

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，可以使js开发变得简单。

简化了JavaScript编程，jQuery实现交互效果更简单。

jQuery的优点：

  • jQuery兼容了现在主流的浏览器(jquery1.x)，增加了程序员的开发效率。
  • jQuery简化了 JavaScript 编程，代码编写更加简单。

jquery下载

code.jquery.com

jquery 1.x实际工作中使用这个，做了浏览器适配

开发阶段使用uncompressed未压缩版，产品上线使用压缩版(代码中删除了空格和换行，提升浏览器下载速度)

jquery的使用

在html、js中只要看到$就说明是使用的jquery

引入

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

jquery入口函数

js的window.onload获取页面标签元素，需要等整个页面标签和数据加载完成才行(如：img标签，需要加载对应的图片完成)

jquery使用$(document).ready函数来获取页面标签元素，只需要等待所有页面标签加载完成就行，不需要等待数据加载完成，它的速度比原生的 window.onload 更快。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script>
        // 原始js获取页面标签的方式
        window.onload = function(){
            var oDiv = document.getElementById("div1")
            alert(oDiv)
        }

        // $符号就是jquery的象征
        // $本质是就是函数，只不过这个函数名($)
        $(document).ready(function(){
        // 获取标签和css样式匹配标签的规则一样
        // 以后使用jquery，变量名都要以$符号开头
            var $div = $("#div1");
            alert($div)
        })

        // jquery的简写方式
        $(function(){
            var $div = $("#div1");
            alert($div)
        })
    </script>
</head>
<body>
    <div id="div1">div标签</div>
    <img src="https://releases.jquery.com/wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="">
</body>
</html>

jquery选择器

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

标签选择器

类选择器

id选择器

层级选择器

属性选择器

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script>
        $(function(){
        // 通过标签选择器 获取标签，可以通过长度判断是否正确获取到
        var $p = $("p")
        alert("标签选择器："+$p.length)
        // 通过jquery设置标签样式
        $p.css({"color":"red"})

        // 通过类选择器获取标签
        $div = $(".box1")
        alert("类选择器："+$div.length)

        // 通过id选择器获取标签
        $div = $("#box2")
        alert("id选择器："+$div.length)

        // 通过层级选择器获取标签
        $div = $("div h1")
        alert("层级选择器："+$div.length)

        $div = $("div .t")
        alert("层级选择器："+$div.length)

        // 属性选择器获取标签
        $h = $("h2[type=first]")
        alert("属性选择器："+$h.length)
        // 结论:jquery选择器获取标签，和css选择器匹配标签的方式一样
    })
    </script>
</head>
<body>
    <p> 
        p
    </p>   
    <p>p</p> 
    <div class="box1">hh</div>

    <div id="box2">div2</div>
    <div>
        <h1></h1>
        <h1 class="t"></h1>
    </div>

    <h2 type="first"></h2>
    <h2 type="second"></h2>
</body>
</html>

选择集过滤

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

    <script>
        $(function(){
            // 通过jquery选择器获取html的标签
            var $divs = $("div")
            alert($divs)
            // 获取包含有指定选择器的父标签
            $div1 = $divs.has("p")
            alert($div1)
            $div2 = $divs.has(".pp")
            alert($div2)
            $div2.css({"background":"green"})
            // 根据下标选择指定的标签
            $divs.eq(0).css({"background":"red"})

            // 选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
        })
    </script>
</head>
<body>
    <div>
        <p>ff</p>
    </div>
    <div>
        <p class="pp">p</p>
    </div>
</body>
</html>

选择集转移

选择集转移就是以选择的标签为参照，然后获取转移后的标签

  • $(‘#box’).prev(); 表示选择id是box元素的上一个的同级元素
  • $(‘#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
  • $(‘#box’).next(); 表示选择id是box元素的下一个的同级元素
  • $(‘#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
  • $(‘#box’).parent(); 表示选择id是box元素的父元素
  • $(‘#box’).children(); 表示选择id是box元素的所有子元素
  • $(‘#box’).siblings(); 表示选择id是box元素的其它同级元素
  • $(‘#box’).find(‘.myClass’); 表示选择id是box元素的class等于myClass的元素

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $("#box1")
            // css参数是一个js对象，js对象和python里面字典很类似
            // 属性名和cs5里面的属性名保存一致
            // 选择上一个同级标签
            $div.prev().css({"color":"red","font-size":"25px"})
            // 选择上面所有的同级标签
            $div.prevAll().css({"text-indent":"50px"})
            // 选择其它所有标签
            $div.siblings().css({"text-decoration":"underline"})
            // 选择父标签
            $div.parent().css({"background":"gray"})
            // 获取所有子标签
            $div.children().css({"color":"red"})
            // 查找指定子标签
            $div.find(".sp1").css({"color":"green"})
        })
    </script>
</head>
<body>
    <div>
        <h3>h3</h3>
        <p>p</p>
        <div id="box1"><span>我是</span><span class="sp1">div</span>标签</div>
        <h3>h3</h3>
        <p>p</p>
    </div>
    
</body>
</html>