java web-11.1Jquery基础

最新推荐文章于 2022-10-20 21:32:48 发布

zhendeWD

最新推荐文章于 2022-10-20 21:32:48 发布

阅读量148

点赞数

分类专栏： Javaweb 文章标签： jquery java js

本文链接：https://blog.csdn.net/weixin_39795049/article/details/106163831

版权

Javaweb 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

JQuery基础

1.概念：
（1）一个JavaScript框架，简化JS开发
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
（2）JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
2.快速入门：
（1）步骤
①下载JQuery
a目前jQuery有三大版本：
1.x :兼容ie678，使用最为广泛，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x就可以了，最终版本：1.12.4（2016年5月20）
2.x:不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。最终版本：2.2.4（2016年5月20）
3.x:不兼容ie678，只支持最新的浏览器，除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本，最终版本，3.2.1（2017年3月20日）
b.jquery-xxx.js与jquery-xxx.min.js的区别
jquery-xxx.js:为开发版本，给程序员看的，有良好的缩进和注释，体积大一些。
jquery-xxx.min.js：为生产版本，程序中使用，没有缩进，体积小一些，程序加载更快。
②导入JQuery
导入min.js文件
③使用
代码示例：本来需要使用var div1 = document.getElementById("div1");
使用jquery后：

<head>
    <meta charset="UTF-8">
    <title>jquery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>//导包
</head>
<body>
    <div id = "div1">div1...</div>
    <div id = "div2">div2...</div>
<script>
    //使用JQuery获取元素对象
    var div1 =$("#div1");//代替原来的document.getElementById("div1")
    alert(div1.html());
    var div2 = $("div2");
    alert(div2.html());
</script>

在这里插入图片描述
3.JQuery对象和JS对象区别与转换：

 //1.通过js方式获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
 alert(divs)

在这里插入图片描述

//2.通过jquery方式获取名称叫div的所有html元素对象
var $divs = $("div");
alert($divs)

在这里插入图片描述
本质区别：

 //1.通过js方式获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs)
    //对divs中所有的div让其标签体内容变为“aaa”
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";//(11111)
    }

    //2.通过jquery方式获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs)
    //对divs中所有的div让其标签体内容变为“bbb”
    $divs.html("bbb");//(2222222)

(2222222)比(11111)更方便
juery对象在操作时，更加方便
jquery对象和js对象方法不通用的
两者互换：
jquery -->js：jquery对象[索引] 或者 jquery对象.get(索引)
js -->jquery:$(js对象)

zhendeWD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java web-11.1Jquery基础

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

扫一扫