JQuery基础知识1

来源：互联网发布：极乐净土秀太捏脸数据编辑：程序博客网时间：2024/06/05 08:18

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 () {……})中，也就是在文档加载完成之后才会去执行此代码。

阅读全文

0 0