JQuery基础知识1

最新推荐文章于 2023-04-14 20:40:28 发布

wj他

最新推荐文章于 2023-04-14 20:40:28 发布

阅读量321

点赞数

分类专栏： JQuery 文章标签：元素选择器 id选择器 class选择器伪类选择器 jquery

本文链接：https://blog.csdn.net/qq_39279061/article/details/77196943

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.1基本概念

JQuery是一个JS库,能够帮助我们轻松实现一些原本可能比较麻烦的功能。
Jquery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便阅读；而未压缩版文件较大，有排版和注释，便于阅读。

Jquery实际上就是一个js文件，加载到页面就可以直接使用了。

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

也可以通过CDN（Content Delivery Network）来引用JQuery

使用CDN的好处：
（1）省事
（2）速度更快

1.2语法

$（选择器）.action（）；
$：定义了这是一个JQuery的代码
选择器：按照一定的规则选择DOM元素，非常类似于CSS选择器。
action：对选中元素执行的操作。
案例：所有段落单击变红
方法一使用js代码

    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
        var paras = document.getElementsByTagName("p");
        for(var i in paras){
            paras[i].addEventListener("click", red);
        }
        function red(){
            this.style.color = "red"
        }
</script>

方法二使用JQuery代码

 <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
             $("p").click(red);
        function red(){
            this.style.color = "red"
        }
</script>

Jquery的一行代码

$("p").click(red);

相当于JS的若干条代码

var paras = document.getElementsByTagName("p");
        for(var i in paras){
            paras[i].addEventListener("click", red);
        }

所以说Jquery极大简化了程序员的工作

1.3选择器

（1）元素选择器：
根据标签名来获取元素，比如
$(“p”)：表示获取所有的段落。

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
             $("p").click(red);
        function red(){
            this.style.color = "red"
        }
</script>

（2）id选择器：
$(“#p1”):表示选择id = “p1”的元素。

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>第一个段落</p>
    <p id="p2">第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
    $("#p2").click(red);
    function red() {
        this.style.color = "red"
    }
</script>

（3）class选择器
$(“.top2”):表示选择class = “top2”的元素。

  <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p class="top2">第一个段落</p>
    <p class="top2">第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
    $(".top2").click(red);
    function red() {
        this.style.color = "red"
    }
</script>

（4）后代选择器
$(“div p”):表示选择div里面的段落。

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>
        <p>第一个段落</p>
        <p>第二个段落</p>
        <p>第三个段落</p>
    </div>
    <p>第四个段落</p>
</body>
<script>
    $("div p").click(red);
    function red() {
        this.style.color = "red"
    }
</script>

（5）伪类选择器
$(“p:first”)：表示选择p标签的第一个元素，相当于CSS中的伪类选择器。

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    $("p:first").click(red);
    function red() {
        this.style.color = "red"
    }
</script>

（6）属性选择器：
$(“p[name]”)：表示选中所有具有name属性的段落

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p name="first">第一个段落</p>
<p name="second">第二个段落</p>
<p name="three">第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    $("p[name]").click(red);
    function red() {
        this.style.color = "red";
    }
</script>

（7）
$(“p[name=’second’]”)：表示选中所有name = “second”的段落

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<p name="first">第一个段落</p>
<p name="second">第二个段落</p>
<p name="three">第三个段落</p>
<p>第四个段落</p>
</body>
<script>
    $("p[name='second']").click(red);
    function red() {
        this.style.color = "red";
    }
</script>

$(“tr:even”)：表示选中所有奇数行的tr

<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<table>
    <tr>
        <td>李东华</td>
        <td>男</td>
        <td>市场部</td>
    </tr>
    <tr>
        <td>潘俊杰</td>
        <td>男</td>
        <td>行政部</td>
    </tr>
    <tr>
        <td>王珊珊</td>
        <td>女</td>
        <td>市场部</td>
    </tr>
    <tr>
        <td>史亚东</td>
        <td>男</td>
        <td>研发部</td>
    </tr>
    <tr>
        <td>郭趁趁</td>
        <td>女</td>
        <td>研发部</td>
    </tr>
</table>
</body>
<script>
    $("tr:even").css("background-color","skyblue");
</script>

1.4事件

JQuery中注册事件的方法也就是调用JQuery对象的方法，
比如点击事件

$(“#div1”).click();

鼠标移入事件

$(“#div1”).mouseenter();

而且方法名就是JS中的事件名

之前，我们所有的JS代码是放在之后的，如果放在之前呢？
实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行此代码是，文档还没有加载完成，也就是说元素都还不存在。
那怎么解决呢？
将代码放在$(document).ready(function () {……})中，也就是在文档加载完成之后才会去执行此代码。

wj他

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础知识1

1.1基本概念JQuery是一个JS库,能够帮助我们轻松实现一些原本可能比较麻烦的功能。 Jquery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便阅读；而未压缩版文件较大，有排版和注释，便于阅读。Jquery实际上就是一个js文件，加载到页面就可以直接使用了。<script src="../jquery-3.2.1.min.js"></script>也可以通
复制链接

扫一扫