python jquery初识

jQuery的介绍

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，
事件处理动画和Ajax更加简单。通过多功能性和可扩展性的结合，
jQuery改变了数百万人编写JavaScript的方式。

jquery 中 98%的都是方法

为什么要使用jquery?

JavaScript书写代码的不足

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

jQuery的下载

https://jquery.com/ 下载对应的jQuery
https://www.bootcdn.cn/ 通过cdn的方式引入

jQuery的使用

扫描二维码关注公众号，回复： 5171559 查看本文章

1 基础选择器

- 标签选择器 $('div')
- id选择器$('#box')
- class选择器$('.box')
- 后代 $("x y")     // x的所有后代y（子子孙孙）
- 子代 $("x >y")  // x的所有儿子y（儿子）
- 组合  $("#id, .className, tagName") //多个标签配合使用
- 交集   //表示2者选中之后共有的特征
- 兄弟 $("x + y")  // 找到所有紧挨在x后面的y
         $("x ~ y")  // x之后所有的兄弟y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        //jQuery的选择器(获取DOM对象 注意,它获取的是jQuery对象而不是jsDOM对象)
        $("div")[0].style.backgroundColor = "red";
        console.log($("#wrap")); //id选择器
        console.log($(".box"));  //类选择器
        console.log($("#wrap .active"));  //后代选择器
        // 获取到jQuery对象,click时间
        $("#wrap .active").click(function(){
            // console.log(this.innerText); //错误写法因为获取到的是jQuery对象而不是结束DOM对象
            // //isdom =>jQuery对象
            // console.log($(this));

            console.log($(this).text()); //点击获取jqery对象的text值 7个alex
            $(this).text("haha");   //将获取当前点击的jQuery值修改
            console.log($(this).text("haha")); //打印出来修改的值
        })
})

</script>
</body>
</html>

2基本过滤器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龙八部</li>
    <li>射雕英雄传</li>
    <li>神雕侠侣</li>
    <li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //获取值,eq()的使用
        console.log($("li:eq(1)").css("color"));
        //设置单个值
        // $("li:eq(1)").css("color", 'red');
        $("li:eq(1)").css({
            color: "red",
            backgroundColor: 'blue'
        });
        //属性选择器
        $("input[type='text']").css({
            backgroundColor: 'yellow'
        })
    })
</script>
</body>
</html>

3 筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龙八部</li>
    <li class="item"><a href="">晓峰</a></li>
    <li>神雕侠侣</li>
    <li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //查的是后代  length: 1
        console.log($("li").find("a"));
        //亲儿子 ul下的所有li
        console.log($("ul").children());
        //亲老爸 a标签的亲爸
        console.log($("a").parent());
        //
        console.log($('ul li').eq(1))
    })
</script>
</body>
</html>

小结:

- find() 查找的是后代
- children() 查找的是亲儿子
- parent()查找的是亲爹
- eq() 选择匹配的元素
- siblings() 选择兄弟元素(除了自己本身)

猜你喜欢