52 前端--jQuery1
Posted yzm1017
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了52 前端--jQuery1相关的知识，希望对你有一定的参考价值。
目录
jQuery
1. jQuery介绍
1.jQuery是一个轻量级的、兼容多浏览器的javascript库。
2.jQuery使用户能够更方便地处理html Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
2. jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
3. jQuery引入
第一种：
下载地址：https://jquery.com/
? 首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
中文文档：http://jquery.cuishifeng.cn/
<script src="jquery.js"></script>第二种：链接网络地址
bootCDN：https://www.bootcdn.cn/jquery/
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>4. jQuert对象
jquery语法： $(“选择器”); 产生一个jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里提供的方法。
? 原生js找到的标签对象称为DOM对象，只能调用DOM对象的方法。
jquery对象和dom对象可以相互转换:
jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以.
jquery对象转换成DOM对象 +[0]索引： $(“选择器”)[0]
（通过[]索引找到的对象都是DOM对象）
DOM对象转换成jquery对象 在前面加 $ 符号： $(div)5. 查找标签
不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器.
基础选择器（同css）
id选择器
$("#id值")标签选择器
$("标签名")class选择器
$(".类值")配合选择器
$('div.c1') // 找到类值为c1的div标签通用选择器
$("*")组合选择器
$("#id,.className,tagName")层级选择器（同css）
x，y是任意选择器
$("x y"); // x的所有后代y（后代）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到紧挨在x后面的y(毗邻)
$("x ~ y") // x之后所有的兄弟y(弟弟)示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div id="d1">
<ul id="u1">
<li class="c1">111</li>
<li class="c2">222</li>
<li class="c3">333</li>
<li class="c4">444</li>
<li class="c5">555</li>
</ul>
</div>
</body>
</html>
操作：
$("#d1");
$("li");
$(".c1");
$("#u1 li");
$("#u1>li");
$(".c1+li");
$(".c1~li");基本筛选器（选择后过滤）
:first // 找到多个后取第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 选取包含某个后代标签的标签示例：
$("li:first");
$("li:eq(2)");
$("li:gt(2)");
$("li:not('.c4')");
$("div:has('.c1')");jQuery事件
模拟对话框
$('#id').click() // 绑定事件
$(".c1,.c2").removeClass("c3") # 删除c1，c2类中的c3值
$(".c1,.c2").addClass("c3") # 将c3值添加到c1，c2类中// 绑定事件的方法
$('#btn').click(function ()
// DOM写法：
$('.mode')[0].classList.remove('hide');
$('.shadow')[0].classList.remove('hide');
// jquery写法:
$('.mode,.shadow').removeClass('hide');
)示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg
background:rgba(6,6,6,0.6);
position: fixed;
top:0;
right: 0;
bottom:0;
left: 0;
z-index: 9;
.case
width: 600px;
height: 400px;
background-color: white;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -300px;
z-index: 10;
.case #off
float: right;
.hide
display: none;
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div style="color: red">欢迎来到-->
<input type="submit" value="登录" id="reg"></div>
<div class="bg hide" id="d1"></div>
<div class="case hide" id="d2">
<label for="i1" >用户名:</label>
<input type="text" id="i1">
<input type="submit" id='off' value="X">
<div></div>
<label for="i2">密 码:</label>
<input type="password" id="i2">
<script>
$("#reg").click(function ()
// $("#d1, #d2").removeClass("hide")
$(".bg,.case").removeClass("hide")
);
$("#off").click(function ()
$("#d1, #d2").addClass("hide")
)
</script>
</div>
</body>
</html>属性选择器
$("[属性]");
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
示例：多用于input标签
<div id = 'd2'>
用户名：<input type="text" class="i1">
密码：<input type="password" name="pwd">
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
操作：
$("input[type]");
$("input[type='text']");
$("input[type='radio']");
表单筛选器
多用于找form表单里面出现的input标签
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
示例：
$(":text"); //找到所有的text
$(":radio") //找到所有的radio
表单对象属性
:enabled // 找可用的标签
:disabled // 废除
:checked // 选中的
:selected // 下拉框选中的
示例：
$(“:enabled”); // 找可用的标签
$(":disabled"); // 找不可用的标签
$(":checked"); // 找选中的标签（checkbox的）
$(":selected"); // 找下拉框中选中的标签
$(":selected").text(); //查看下拉框选中的文本内容
6. 筛选器方法
下找 .next：
$("#id").next() // 下一个标签
$("#id").nextAll() // 下全部标签
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
上找 .prev：
$("#id").prev() // 上一个标签
$("#id").prevAll()
$("#id").prevUntil("#i2") // 从上找，顺序从下向上
找父级 .parent:
$("#id").parent() // 找父辈
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
找后代 .find
$("div").find("p") // 等价于$("div p") 找div后代p标签
筛选 .filter
$("div").filter(".c1") //等价于 $("div.c1") 找有class='c1'属性的div
补充
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
7. 标签操作
样式操作
样式类操作：
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
css操作：
单个： $(“”).css()
多个：$(“”).css()
.css("color","red") //DOM操作：tag.style.color="red"
示例：
$('div').css('background-color','green');
$('div').css('background-color':'yellow','width':'400px');
链式表达式
<ul>
<li>111</li>
<li>222</li>
<li class="c1">333</li>
<li>444</li>
<li>555</li>
<li class="c2">666</li>
<li>777</li>
</ul>
操作 $('li:first').next().css('color','green').next().css('color','red');
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离
$(".c1").offset() // 查看相对当前窗口的位置
$(".c1").offste(top:100,left:200); // 设置位置
$(".c2").position() //查看相对父级的位置
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。与 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body
margin: 0;
.c1
background-color: red;
height: 100px;
width: 100px;
display: inline-block;
.c2
background-color: green;
height: 100px;
width: 100px;
display: inline-block;
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div><div class="c2"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
</script>
</body>
</html>
操作：
$(".c1");
$(".c1").offset();
$(".c1").offset(top:100,left:200);
$(".c1").position();鼠标滚动：
$(window).scroll() # 鼠标滚动触发事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3
width: 200px;
height: 400px;
background-color: red;
.c2
width: 200px;
height: 800px;
background-color: pink;
.a1
width: 80px;
height: 20px;
text-decoration: none;
position: fixed;
right:40px;
bottom: 40px;
.hide
display: none;
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<a id="top">顶部</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<a href="#top" class="a1 hide">回顶部</a>
<script>
$(window).scroll(function ()
if ($(window).scrollTop()>400)
$(".a1").removeClass("hide");
else
$(".a1").addClass("hide");
);
</script>
</body>
</html>尺寸
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1
width: 200px;
height:200px;
padding:20px 30px;
border:2px solid red;
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div class="c1"></div>
</body>
</html>
操作：
$(".c1").height(); // 200
$(".c1").width(); // 200
$(".c1").innerWidth(); // 260
$(".c1").innerHeight(); // 240
$(".c1").outerHeight(); // 244
$(".c1").outerWidth(); // 264
文本操作
.html() // 获取其所有的标签及内容
.html(val) // 设置内容，识别标签，能够表现出标签的效果
.text() // 获取所有的文本内容
.text(val) // 设置内容，不识别标签，将标签作为文本插入进去
取值方法
取值方法：
input文本框： $("[type='text']").val() // 获取匹配到的值
input单选框radio：
$("[type='radio']:cheched").val()
input多选框checkbox:（多选需循环取值）
var d=$("[type="checkbox"]:checked")
for (var i=0;i<d.length;i++)
console.log(d.eq(i).val());
input下拉框select：(可多选值)
$("").val
设置值：
文本框： $(":text").val("xxx");
单选框： $(":radio").val(['1']);
多选框： $(":checkbox").val(["1","3"])
给单选框或者多选框设置值的时候，只要val方法中的值和标签的value属性对应的值相同时，那么这个标签会被选中。
$(":radio").val('1');这样设置，不带中括号，会将所有radio的value值都修改为1,产生错误。
单选下拉框：(通过select标签操作)
$("").val('2');
或者： $("").val(['2']);
多选下拉框：
$("").val(['2'，'4']);
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
用户名：<input type="text">
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div>
性别：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="3">抽烟
<input type="checkbox" name="hobby" value="4">喝酒
<input type="checkbox" name="hobby" value="5">蹦迪
</div>
<div>
地点：
<select name="city" id="city" multiple>
<option value="11">北京</option>
<option value="12">上海</option>
<option value="13">深圳</option>
</select>
</div>
</body>
</html>
操作：
$(":text").val("sd");
$(":radio").val(['2']);
$(":checkbox").val(['3','4']);
$("#city").val(['13','12']);
以上是关于52 前端--jQuery1的主要内容，如果未能解决你的问题，请参考以下文章