jQuery入门（一）--jQuery介绍

最新推荐文章于 2021-08-02 21:17:07 发布

福尔康.爱新觉罗

最新推荐文章于 2021-08-02 21:17:07 发布

阅读量181

点赞数

分类专栏：前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44122710/article/details/106958389

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
1配置环境

 <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head>

2基础语法是：

$(selector).action()

美元符号 $ 定义 jQuery。
选择符（selector）“查询”和“查找” HTML 元素。
jQuery 的 action() 执行对元素的操作。

另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如'$("#syl")' 和'jQuery("#syl")' 是等价的，$.ajax 和 jQuery.ajax 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。

3 文档就绪函数
所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

// 可以简写成

$(funciton(){

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法，不过它们还是有一些区别的，简单对比如下所示：

	window.onload	$(doucment).ready()
执行时机	必须等待网页中所有的内容加载完毕后才能执行（包括图片）	网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数	不能同时编写多个	能同时编写多个

4例子


```javascript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <div class="box">
            <ul class="menu">
                <li class="level1">
                    <a href="#">春天</a>
                    <ul class="level2">
                        <li>春意盎然</li>
                        <li>春意盎然</li>
                        <li>春意盎然</li>
                        <li>春意盎然</li>
                    </ul>
                </li>
                <li class="level1">
                    <a href="#">夏天</a>
                    <ul class="level2">
                        <li>夏日炎炎</li>
                        <li>夏日炎炎</li>
                        <li>夏日炎炎</li>
                        <li>夏日炎炎</li>
                    </ul>
                </li>
                <li class="level1">
                    <a href="#">秋天</a>
                    <ul class="level2">
                        <li>秋高气爽</li>
                        <li>秋高气爽</li>
                        <li>秋高气爽</li>
                        <li>秋高气爽</li>
                    </ul>
                </li>

            </ul>
        </div>
        <script type="text/javascript">
            //等待dom元素加载完毕
            $(document).ready(function() {
                $(".level1>a").click(function() {
                    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
                    return false;
                })
            });
        </script>
    </body>
</html>

简单解释一下这段代码，当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class，然后调用 next() 和 show() 将其后面的元素显示出来，然后调用 parent()、siblings()、children("a") 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass("current"))，并且将紧邻它们后面的元素都隐藏。

这就是 jQUery 的强大的链式操作，但为了进一步改善代码的可读性和可维护性，推荐一种写法：

$(document).ready(function() {
    $(".level1>a").click(function() {
        $(this).addClass("current")//给当前元素添加"current"样式
        .next().show()//下一个元素显示
        .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素a移除"current"样式
        .next().hide();//它们的下一个元素隐藏
        return false;
    })
});

5jQuery对象和dom对象
DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：
在这里插入图片描述
h1,p,ul 以及 li 标签都是 DOM 元素节点，我们可以通过 JavaScript 中的 document.getElementById()，document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：

document.getElementById("syl").innerHTML;

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如

$("#syl").html();//获取id为syl的元素内的html代码，html()是jQuery中的方法

我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。 jQuery 对象中无法使用 DOM 对象中的任何方法，反之亦然。
jQuery 对象和 DOM 对象之间的相互转换

1.jQuery 对象转换为 DOM 对象

[index]:jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到对应的 DOM 对象，比如：

var $cr = $("#cr");//jQuery 对象
var cr = $cr[0];//DOM 对象

通过 get(index) 方法得到相应的 DOM 对象，比如：

var $cr = $("#cr");//jQuery 对象
var cr = $cr.get(0);//DOM 对象

2.DOM 对象转换为 jQuery 对象

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，比如：

var cr = document.getElementById("cr");//DOM 对象
var $cr = $(cr);//jQuery 对象

我们平时用到的 jQuery 对象都是通过 () 函数制造出来的，()函数制造出来的，() 函数就是一个 jQuery 对象的制造工厂。
DOM 方式判断复选框是否被选中：

 if(cr.checked){//DOM方式判断
                        alert('你已同意本协议');
                        }

jQuery 方式判断复选框是否被选中：

 if($cr.is(":checked")){
                        alert('你已同意本协议');
                        }

福尔康.爱新觉罗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门（一）--jQuery介绍

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。1配置环境 <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head>2基础语法是：$(selector).action()美元符号 $ 定义 jQuery。选择符（selector）“查询”和“查找” HTML 元素。jQuery 的 ac
复制链接

扫一扫

专栏目录