JQuery简析
1.概念
jQuery 是⼀套兼容多浏览器的 javascript 脚本库.。核⼼理念是写得更少，做得更多，使⽤ jQuery 将极⼤的提⾼编写 javascript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮。
2.下载与安装
2.1下载
2.2版本选择
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 向⾼⼿学习是最好学习⽅法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
2.3优点
（1）提供了强⼤的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
2.4 安装
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
3.Jquery对象
3.1 jquery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。
通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法。
3.2Dom对象和Jquery对象
dom对象 （var jsDiv = document.getElementById(“div1”);
如果元素存在，获取对应dom对象，如果不存在，不存在返回null
jquery对象 （var jqDiv = $("#div1");）
如果元素存在，获取对应包装集对象，如果不存在返回空的结果集
校验对象是否存在
dom 直接判断对象是否等于null
jquery 判断对象的长度是否大于 0
Dom对象转换成jquery对象
将dom对象和元素字符串放入$(); $(jsDiv)
jquery对象转换成Dom对象
jquery对象获取下标 jqDiv[0]
<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对象------------------")
// 获取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>
4.Jquery选择器
4.1 概念
和使⽤ JS 操作Dom⼀样，获取⽂档中的节点对象是很频繁的⼀个操作，在jQuery中提供了简便的⽅式S供我们查找|定位元素，称为jQuery选择器。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使⽤的。
4.2基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $(“div”)选择所有div元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择⻚⾯所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
| 属性选择器 | [属性 = “属性值”] | $("[abc = ‘cbd’]");选择页面中属性abc值为cbd的元素 |
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
<pre name="pr" abc="cbd">
PDD 卢本伟
</pre>
<script type="text/javascript">
//id选择器
var div1 = $("#mydiv1");
console.log(div1);
console.log($("#mydiv1"));
//元素名称选择器
var divs = $("div");
console.log(divs);
console.log($("div"))
//类选择器
var bls = $(".blue");
console.log(bls);
console.log($(".blue"))
//选择所有元素
var all = $("*");
console.log(all);
//组合选择器
var zh = $("#mydiv1,div,.blue");
console.log(zh);
//属性选择器
var pre = $("[abc = 'cbd']");
console.log(pre);
</script>
4.3层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | 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元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 后代选择器
var hd = $("#parent img");
console.log(hd);
//子代选择器
var zd = $("#parent > div");
console.log(zd);
//相邻选择器
var xl = $("#child + div");
console.log(xl);
//同辈选择器
var tb = $(".gray ~ img");
console.log(tb);
</script>
</body>
</html>
4.4表单选择器
| 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") |
<form id='myform' name="myform" action="" method="get">
<input type="hidden" name="uno" value="9999" disabled="disabled"/>
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" onclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取表单选择器
var bd = $(":input");
console.log(bd);
//单选按钮选择器
var radios = $(":radio");
console.log(radios);
//多选按钮选择器
var checkboxs = $(":checkbox");
console.log(checkboxs);
function checkForm(){
// return false;
}
</script>
5.Jquery Dom操作
jQuery也提供了对HTML节点的操作，⽽且在原⽣js的基础之上进⾏了优化，使⽤起来更加⽅便。
常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。
注意：以下的操作⽅式只适⽤于jQuery对象。
5.1操作元素的属性
属性的分类
元素固有属性
元素自带属性
自定义属性
元素中自己定义的属性和值
属性值为boolean类型的属性
checked selected disabled......
获取属性
attr("属性名")
可以操作固有属性和自定义属性
操作boolean类型属性，如果属性存在获取具体的值，如果不存在，返回undefined
prop("属性名")
可以操作固有属性，不能操作自定义属性
操作boolean类型属性，如果属性存在返回true，如果不存在，返回false
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名");
<form action="" id="myform">
<input type="checkbox" id="in1" data="aa" value="12" name="ch" checked="checked"/> aa
<input type="checkbox" id="in2" data="bb" value="12" name="ch" /> bb
</form>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取表单元素
var in1 = $("#in1");
var in2 = $("#in2");
//获取固有属性
console.log(in1.attr("value"),in1.prop("value"));
console.log(in2.attr("value"),in2.prop("value"));
//操作自定义的属性
console.log(in1.attr("data"));
console.log(in2.attr("data"));
console.log(in2.prop("data"));
console.log(in2.prop("data"));
//操作boolean的属性
console.log(in1.attr("checked"));
console.log(in1.prop("checked"));
console.log(in2.attr("checked"));
console.log(in2.prop("checked"));
//设置自定义属性
in2.attr("abc","123");
//设置boolean类型
// in2.attr("checked","checked");
in2.prop("checked",true);
//移除属性
in2.removeAttr("data");
</script>
5.2操作元素的样式
| ⽅法 | 说明 |
|---|---|
| attr(“class”) | 获取class属性的值，即样式名称 |
| attr(“class”,“样式名”) | 修改class属性的值，修改样式 |
| addClass(“样式名”) | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
增加元素的具体样式，格式：
1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})
例：css({“background-color”:“red”,“color”:"#fff"});
2）css(“样式名”,”样式值”)
例：css(‘color’,‘white’)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取class属性的值
var cb = $("#conBlue");
console.log(cb.attr("class"));
//修改class属性的值
cb.attr("class","green");
cb.addClass("larger");
//添加样式名称
var cr = $("#conRed");
cr.addClass("green");
cr.addClass("blue");
//添加具体的样式
cr.css("color","red");
cr.css({
"font-family":"华文新魏",
"font-weight":900
});
//移除样式名称
var rm = $("#remove");
rm.removeClass("larger");
rm.removeClass("blue");
</script>
</body>
</html>
5.3 操作元素的内容
对于元素还可以操作其中的内容，例如⽂本，值，甚⾄是html。
非表单元素
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
表单元素
val() 获取元素value值
val(‘值’) 设定元素的value值
| ⽅法 | 说明 |
|---|---|
| html() | 获取元素的html内容 |
| html(“html, 内容”) | 设定元素的html内容 |
| text() | 获取元素的⽂本内容，不包含html |
| text(“text 内容”) | 设置元素的⽂本内容，不包含html |
| val() | 获取元素value值 |
| val(“值”) | 设定元素的value值 |
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取元素的内容
console.log($("h3").html());
console.log($("h3").text());
//设置元素的内容
$("#html").html("<h2>PDD</h2>");
$("#text").text("<h2>卢本伟</h2>");
//获取元素的value值
var val = $("[name = 'uname']").val();
console.log(val);
$("[name = 'uname']").val('大司马');
</script>
5.4创建元素_添加元素
创建元素
$(内容) $("<p>段落标签</p>")
添加元素
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
//删除元素
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()清空所选元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//创建元素
var str = "<p>段落标签</p>";
console.log($(str));
//获取追加的元素
var div = $(".green");
//创建新的元素
var str = "<span>周杰伦</span>";
//添加新元素 前追加
div.prepend(str);
//prependTo()方法前追加内容
var str2 = "<span>林俊杰</span>";
$(str2).prependTo(div);
//append()方法后追加内容 后追加
div.append("<span>梁朝伟</span>");
//appendTo()方法后追加内容
$("<span>黄渤</span>").appendTo(div);
//before()
var ns = $(".red");
ns.before("<span style='color:red'>PDD</span>");
//after()
ns.after("<span style='color:red'>卢本伟</span>");
//删除元素 remove
// $(".blue").remove();
$(".blue").empty();
</script>
</body>
</html>
5.5遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var spans = $("span");
spans.each(function(index,element){
console.log(element);
console.log(index);
});
</script>
</body>
</html>
5.6 Jquery事件
ready加载事件
将页面中dom结构加载完毕之后运行
格式：
$(document).ready(function(){
//处理事件的代码
});
或(上面的简化)
$(function(){
//处理事件的代码
});
ready和load之间的区别
load事件：等待将页面中dom结构和引入的资源文件加载完毕之后运行
ready事件：等待将页面中dom结构加载完毕之后运行
bind绑定方式（可以绑定多个事件）
$(selector).bind( eventType [, eventData], handler(eventObject));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn1">按钮</button>
<h3>bind()方简单的绑定事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
<button type="button" class="btn1">点击</button>
<button type="button" class="btn2">点击2</button>
<button type="button" name="btn3">点击3</button>
<script type="text/javascript">
//加载事件
// $(document).ready(function(){
// document.getElementById("btn1").οnclick= function(){
// console.log("点击事件");
// };
// });
//加载事件 简
// $(function(){
// document.getElementById("btn1").οnclick= function(){
// console.log("点击事件");
// };
// });
//bind绑定事件
$("#btntest").bind("click",function(){
console.log("点击事件 input");
});
//bind绑定多个事件
$(".btn1").bind("click",function(){
console.log("点击事件 input");
}).bind("mouseout",function(){
console.log("鼠标移开");
});
$(".btn2").bind({
"click":function(){
console.log("点击事件2");
},
"mouseover":function(){
console.log("鼠标悬停2");
}
});
//直接绑定
$("[name = 'btn3']").click(function(){
console.log("点击事件3");
}).mouseover(function(){
console.log("鼠标悬停3");
});
</script>
</body>
</html>
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
