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']);