2-43 JQuery

最新推荐文章于 2024-09-12 15:08:36 发布

Doub1eOne

最新推荐文章于 2024-09-12 15:08:36 发布

阅读量567

点赞数

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

本文链接：https://blog.csdn.net/WilsonDone/article/details/127559924

版权

Note 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

JQuery

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 jQuery特点

具有独特的链式语法。
支持高效灵活的CSS选择器。
拥有丰富的插件。
兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix

如何用JQuery

JQuery的下载可以从官网【JQuery.com】或从【GitHub】，现阶段兼容较好的版本是1.12.4版本，最新版本3.x

JQuery下载之后又两个版本，一个带min【精简版本】，一个不带【完全版本】，效果是一样

在工程导入JQuery文件之后，在需要使用JQuery文件的页面中添加一句话，可以导入JQuery文件

  //写在head标签下
    <script src="jQuery/jquery-1.12.4.min.js"></script>

可以使用网络资源中JQuery文件，使用JQuery【必须有网】，这种方式叫做CDN引入

ps：需要和使用CDN引入，那么需要写在src路径后

常见的CDN
"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"  --> 百度
"http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js" -->新浪
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" -->Google
"http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" --> 微软

JQuery语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-1.12.4.min.js"></script>
      <!--    js 和JQuery的区别 -->
    <script type="text/javascript">
        // window.onload = function () {
        //      var btnObj = document.getElementById("btnId");
        //      btnObj.onclick = function () {
        //             alert("JS原生单击事件")
        //      }
        //  }
        $(function () {
                $("#btnId").click(function () {
                    alert("JQuery的单击事件")
                })
        })

    </script>
</head>
<body>
      <button id = "btnId">SayHello</button>
</body>
</html>

$(function) :页面加载完毕之后执行并且可以写多个

$(）页面加载之前就执行

$是JQuery函数的简写
$(document).ready(function(){
// 在这里写你的代码...
});

ps：$(function) 执行函数的入口相当于是 java 中的main()简写形式

$(document).ready(function(){}); 执行函数如果，相当于是 java中的 public static void mian() 全写形式

$(selector).action 通过选取HTML元素，并对选取的元素执行某些操作

selector 表示 “查找” HTML元素 action 执行对元素操作

selector可以传递什么?

$(“#id属性值”) ：id选择器，根据id查询标签对象

$(“标签名”): 标签选择器，根据执行的标签名查询标签对象

$(“.class属性值”): 类型选择器，可以根据class属性查询标签对象

JQuery对象和Dom对象的区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和Dom对象的对比</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btnObj = document.getElementById("btn01");
            alert(btnObj);//object HTMLButtonElement //DOM对象
            alert($(btnObj));//object Object // JQuery对象
        })
    </script>
</head>
<body>
        <button id="btn01">按钮</button>

</body>
</html>

DOM对象：

DOM对象是通过 getElementById() ElementsByName ByTagName 查询出来。

所以DOM对象打印结果是【object HTML标签名Element】

JQuery对象：

JQuery对象是通过JQuery的 API创建 API查询 JQuery包装Dom对象

所以JQuery对象打印出来结果是【object object】

JQuery对象的本质

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和Dom对象的对比</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $button = $("button");
            for(var i = 0; i<$button.length;i++){
                //JQuery 本质
                //本质：JQuery对象是dom对象的数组+Jquery提供了功能函数可以操作对象
                alert($button[i]);
            }
        })
    </script>
</head>
<body>
        <button id="btn01">按钮</button>
        <button id="btn02">按钮</button>
        <button id="btn03">按钮</button>
        <button id="btn04">按钮</button>

</body>
</html>

Doub1eOne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-43 JQuery

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
复制链接

扫一扫

专栏目录