jQuery

最新推荐文章于 2024-10-30 19:10:39 发布

慢热的生活

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量507

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/m0_64036990/article/details/121892113

版权

JQuery
1. 主要内容
2. Jquery对象
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极
大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加
健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so
easy。" --因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多
JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript
框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
2.1. Jquery的下载与安装
2.1.1. 下载
http://jquery.com/ 下载
2.1.2. 版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不
支持 ie6 7 8,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
目前使用版本：jquery-3.5.1.js
2.1.3. 优点
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
......
2.1.4. 安装
在页面引入即可
2.2. Jquery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对
象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
<script src="js/jquery-3.5.1.js" type="text/javascript" ></script>
$ <==> jQuery
2.3. Dom对象与 Jquery包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM
接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装
集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。
2.3.1. Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：
2.3.2. Jquery包装集对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个
jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：
2.3.3. Dom对象转 Jquery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
2.3.4. Jquery对象转 Dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可
通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象
案例：
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
var jQueryObject = $("#testDiv");
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);
// 第一种方式获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第二种方式获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom
$('#mydiv').each(function() {//遍历
var jquery = $(this);
});
<div id="mydiv">write less, do more</div>
<script type="text/javascript">
console.log("-------------获取dom对象------------------")
// dom对象
var domDiv = document.getElementById("mydiv");
console.log(domDiv);
console.log("-------------获取jquery对象------------------")
3. Jquery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式
供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的
讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选
择不同的Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌
握即可 ,其他用到再查阅。
3.1. 基础选择器
// 获取jquery对象
// 第一种方式
var jqueryDiv = jQuery('#mydiv');
console.log(jqueryDiv);
// 第二种方式
jqueryDiv = $('#mydiv');
console.log(jqueryDiv);
console.log("-------------dom转jquery------------------")
// dom转jquery包装集/对象
var obj = $(domDiv);
console.log(obj);
console.log("-------------jquery转dom------------------")
// jquery对象转dom对象
var dom = $('#mydiv')[0]; // 获取jquery对象转为dom
// 或
var dom2 = jqueryDiv[0]; // 将jquery对象转为dom
console.log(dom);
console.log(dom2);
/* this代表了dom对象，不是jquery对象 */
console.log("-------------dom转jquery------------------")
$('#mydiv').each(function() {
// 通过id选择器选择了id为mydiv的所有元素然后进行遍历
// 那么遍历出的每个元素就是id为mydiv的标签元素
// 而this就代表了当前的这个元素
var jquery = $(this);
});
console.log("-------------jquery转dom------------------")
$('#mydiv').each(function() {
var dom3 = this;
});
</script>
选择器名称举例
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选
择器
element $("div")选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元
素
* $("*")选择页面所有元素
组合选择器 selector1,selector2,selectorN
$("#testDiv,span,.blue")同时选中多个选择器
匹配的元素
<style type="text/css">
.blue{
background: blue;
}
</style>
<body>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
// id选择器
console.log("======id====");
var idSelecter = $('#mydiv1');
console.log(idSelecter.html());
console.log(idSelecter.text());
// 元素选择器
console.log("======name====");
var nameSe = $('div'); // 有多个div元素
nameSe.each(function(){
// this是dom对象，$(this)是jquery对象
console.log($(this).text());
});
// 类选择器，class
console.log("======class====");
var classSe = $('.blue'); // 有多个class=blue的元素
classSe.each(function(){
console.log($(this).text());
});
// 通用选择器：*
console.log("======所有元素====");
var all = $("*");
console.log(all.length);
// 组合选择器
console.log("======组合====");
var unionSe = $('span, .blue,div');
unionSe.each(function(){
console.log($(this).text());
选择器名称举例
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素
3.2. 层次选择器
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<style type="text/css">
.testColor{
background: green;
}
.gray{
background: gray;
}
</style>
</head>
<body>
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png"
           width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png"
           width="270" height="129" />
</div>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
</body>
<script type="text/javascript">
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');
ancestorS.each(function(){
console.log($(this).text());
});

console.log("=========子代选择器-选择儿子辈=====");
var child = $('#parent>div');
child.each(function(){
console.log($(this).text());
Forms 名称举例
表单选择器 :input
查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 :text 查找所有文本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")
单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")
重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")
文件域选择器 :file 查找所有文件域：$(":file")
3.3. 表单选择器
});

console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");
console.log(pre_next.length);

console.log("=========同辈选择器,其后，（弟弟）=====");
var pre_siblings = $(".gray ~ img");
console.log(pre_siblings.length);
</script>
</html>