jQuery基础知识(一)

最新推荐文章于 2023-08-08 16:32:51 发布

千甲

最新推荐文章于 2023-08-08 16:32:51 发布

阅读量235

点赞数 1

分类专栏： jQuery 文章标签： jQueryAPI jQuery用途 jQuery入门

本文链接：https://blog.csdn.net/weixin_43711397/article/details/101352834

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

jQuery介绍

jQuery介绍

1.官网

官网：https://jquery.com

2.什么是jQuery？

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，因为它提供了一个易于使用的API，可以跨多种浏览器工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。——摘自官网

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

3.jQuery中文API

http://jquery.cuishifeng.cn/index.html
百度网盘链接：https://pan.baidu.com/s/1pCJpdPgabieO-jt_68Zpjw
提取码：wk9s

4.快速入门

（1）jQuery3.4.1下载
官网地址：https://jquery.com/download/
百度网盘：https://pan.baidu.com/s/1UrmN7LDu3TCIt9LotZJfgA
提取码：651v
（2）导入JQuery的js文件：导入min.js文件
（3） JQuery对象和JS对象区别与转换

a）. JQuery对象在操作时，更加方便。
b）. JQuery对象和js对象方法不通用的.
c）. 两者相互转换
* jq – > js : jq对象[索引] 或者 jq对象.get(索引)
* js – > jq : $(js对象)


<div id="box">abc</div>
    <script type="text/javascript">

        console.dir(document.getElementById("box"));

        console.dir($('#box'));

        console.dir($('#box')[0]);

        console.dir( $(document.getElementById("box")) );
        
    </script>

运行结果
在这里插入图片描述
（4）实例



<head>
    <meta charset="UTF-8">
    <title>Hello jQuery</title>
    <!-- 导入jquery-3.4.1.js-->
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="ccc"></div>
    <script type="text/javascript">
        /*写法一
        var ccc =document.getElementById("ccc");
        ccc.style.width="100px";
        ccc.style.height="100px";
        ccc.style.backgroundColor="red";*/
         /*写法二
         $('#ccc').css({width:'100px',height:'100px',backgroundColor:'green'});
         */
		//写法三
         $('#ccc').css('width','100px')
             .css('height','100px')
             .css('backgroundColor','blue');
    </script>
</body>
</html>

运行结果
在这里插入图片描述

5.用途

（1）访问和操作DOM元素
        如果不使用JavaScript 库，遍历DOM （Document Object Model ，文档对象模型）树，以及查找HTML 文档结构中某个特殊的部分，必须编写很多行代码。jQuery 为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。
（2）控制页面样式
        用jQuery可以很便捷地控制页面的CSS文件，用jQuery操作页面的样式可以很好地兼容各种浏览器，比如：微博，博客，邮箱等的换肤功能。
（3）事件处理
        引入jQuery后，可以使页面的表现层与功能开发分离，开发者更多地关注于程序的逻辑与功效，页面设计者侧重于页面的优化与用户体验，通过事件绑定机制，实现两者的结合。
（4）方便的使用jQuery插件
        可以使用大量的jQuery插件来完善页面的功能和效果。极大的丰富了页面的展示效果。
（5）Ajax操作
        利用Ajax异步读取服务器数据的方法，极大地方便了程序的开发，增强了页面交互，提升了用户的体验，引入jQuery后，减少了代码的书写，通过其内部函数和对象，可以简单实现复杂的功能。

千甲

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础知识(一)

文章目录jQuery介绍1.官网2.什么是jQuery？3.jQuery中文API4.快速入门5.用途jQuery介绍1.官网官网：https://jquery.com2.什么是jQuery？jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML documen...
复制链接

扫一扫

专栏目录