当前位置: article > 正文

JQuery基础

作者：盐析白兔 | 2024-03-30 07:52:30

踩

JQuery基础

JQuery就是封装了js的常用代码用起来更加简洁方便

使用jQuery前可去官网下载载入js文件

编写第一个jq代码

$(document).ready(function (){
console.log("Hellw,jQuery!")
})
1
2
3

ready方法与js中的onload事件类似不过还是有区别的 js的onload事件是在等待页面所有的内容加载完毕后再执行的而ready方法呢是在DOM文档结构绘制完毕后执行的无需等待与DOM关联的元素（图片。。。）

jq的语法结构

$(选择器).方法();
1

这里的 $相当于 j Q u ery 而$ ()的作用是将DOM对象转换为jQuery对象

jQuery选择器

基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/js文件/jquery-3.7.1.min.js" type="text/javascript"></script>
<body>
    <div class="bbs">
        <header>
            <span onclick="add()">我要发帖</span>
        </header>
        <section id="main">
        </section>
        <div class="post" style="display: none;">
            <input class="title" placeholder="请输入标题（1-50个字符）">所属版块：
            <select id="mySelect">
                <option>请选择版块</option>
                <option>Python交流专区</option>
                <option>Java交流专区</option>
                <option>Web交流专区</option>
            </select>
            <textarea class="content"></textarea>

        </div>
    </div>
    <span class="a">老六</span>
            <input class="btn" value="发布" onclick="updatename()">
            <input class="btn" value="关闭" onclick="closing()">
</body>
<script>
    function updatename(){
        //class选择器
        $(".a").html("六六六");
         //id选择器
         $("#a").html("六六六");
          //标签选择器
        $("p").html("六六六");
         //获取所有元素选择器
        $("*").html("六六六");
         //并集选择器
         $(".a,p,#a").html("六六六");
    }
    function closing(){
        var type="";
        $("option").each(function (){
            type+=$(this).val()+" "
        })
        $(".bbs").html(type);
    }

</script>
</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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

层次选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/js文件/jquery-3.7.1.min.js" type="text/javascript"></script>
<style>
    input:focus{
        background-color: blueviolet;
    }
    button:focus{
        background-color: rgb(24, 180, 89);
    }
    @keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}
.iii:animated{
    background-color:aqua;
}

#id3 {
    animation: move 1s infinite alternate; /* 应用动画效果 */
}
</style>
<body>
    <h1>h1</h1>
    <p>p</p>
    <h2>h2</h2>
    <div>
        <ul id="id1" style="width: 100px;">
            <li>1</li>
            <ul>
                <li>2<span>4</span></li>
            </ul>
        </ul>
        <ul id="id2">
            <li>5</li>
        </ul>
        <ul id="id3">
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
        </ul>
        <button>点击获得焦点</button>
        <button class="iii">改变动画</button>
    </div>
    <input type="text">
</body>
<script>
    //div 下的所有ul 后代选择器 
    console.log($("div ul").css("border", "1px solid blue"));
    //div下的ul子级标签 子选择器 与后代选择器的区别就是 后代选择器会选择符合他条件的标签 哪怕孙选择器 而子选择器只会选择他的子级
    console.log($("div>ul").css("border", "1px solid red"));
    //兄弟选择器 匹配li的兄弟ul的所有ul元素
    console.log($("li~ul").css("color", "green"));
    //相邻选择器 匹配ul的邻居ul
    console.log($("ul+ul").css("color", "red"));
    //基础过滤选择器
    //选取到第一个ul元素
    console.log($("ul:first").css("border", "1px solid green"));
    //选取到最后一个ul元素
    console.log($("ul:last").css("border", "1px solid pink"));
    //匹配除了id1的ul标签
    $("ul:not(#id1)").css("border", "1px solid black");
    //获取索引是偶数的ul元素
    $("ul:even").css("border", "1px solid purple");
    //获取索引是偶数的ll元素
    $("li:odd").css("color", "purple");
    //选取给定的索引 从0开始
    $("li:eq(0)").css("color", "yellow")
     //选取索引大于0的li
    $("li:gt(0)").css("color", "pink")
     //选取索引小于1的li 
     $("li:lt(1)").css("color", "black")
     //选取标题元素
    $(":header").css("color","brown")
    //给获得焦点的元素 提高与用户交互
    $("input:focus").css("background-color","deeppink")
    //选取动画元素
    $(":animated").css("background-color","deeppink")

</script>

</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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

属性选择器/过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="cont1">
        <dl>
          <dt><img src="./images/list1.jpg" alt="" /></dt>
          <dd>
            <b id="b">￥9</b>
            <span>亨氏120g乐维滋(苹果草莓)(1岁+)</span>
          </dd>
        </dl>
        <dl>
          <dt><img src="./images/list2.jpg" alt="" /></dt>
          <dd>
            <b id="b1">￥107</b>
            <span>嘉宝Gerber 豌豆营养米粉225g</span>
          </dd>
        </dl>
        <dl>
          <dt><img src="./images/list3.jpg" alt="" /></dt>
          <dd>
            <b>￥29</b>
            <span>北田 米饼100g 香蕉牛奶口味</span>
          </dd>
        </dl>
        <dl>
          <dt><img src="./images/list4.jpg" alt="" /></dt>
          <dd>
            <b>￥19.9</b>
            <span>贝莱康Balic全棉安心内裤(3条装)</span>
          </dd>
        </dl>
      </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //选取b标签有id的
    $("b[id]").css("color", "pink");
    //选取b标签id为b的
    $("b[id=b]").css("color", "red");
    //选取b标签id不为b的
    $("b[id!=b]").css("color", "red");
    //选取b标签id值属性开头为b的标签
    $("b[id^=b]").css("color", "yellow")
    //选取b标签id值属性结尾为b的标签
    $("b[id$=b]").css("color", "brown")
    //选取b标签id值属性带有为b的标签
    $("b[id*=b]").css("color", "green")
</script>
</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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

解决jQuery和其他库的冲突

如果在其他库之前导入jq库 $符号的使用权不在 j q 但是可以使用 J q u ery （）方法代替$

在其他库之后导入JQuery库

1.使用jQuery.nooConflict()将控制权移交给别的库
2.用别的字符（变量）接收jQuery.nooConflict()的引用自定义一个新的字符

上面的方法都不推荐使用！

上面两种风格虽然解决了冲突问题但是改变了jQuer的编码风格从而对已有的JQuery代码重用带来的影响
1.

jQuery.nooConflict(); //放弃$的使用权 给别的脚本使用
jQuery(document).ready(function($){
//在此代码块中可使用$
})
1
2
3
4

jQuery.nooConflict(); //放弃$的使用权 给别的脚本使用
(function($){
//在此代码块中可使用$
}
)(jQuery)
1
2
3
4
5

可使用这两个方式

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/339706?site

JQuery基础

JQuery就是封装了js的常用代码 用起来更加简洁方便

使用jQuery前可去官网下载载入js文件

编写第一个jq代码

jq的语法结构

jQuery选择器

基础选择器

层次选择器

属性选择器/过滤选择器

解决jQuery和其他库的冲突

在其他库之后导入JQuery库

上面的方法都不推荐使用！

JQuery就是封装了js的常用代码用起来更加简洁方便