一、主要内容
二、jQuery对象
1.jQuery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法。
$ <==> jQuery
2. Dom对象 与 Jquery包装集对象
- Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和⽅法：
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
- Jquery包装集对象
可以说是 Dom 对象的扩充。在 jQuery 的世界中将所有的对象， ⽆论是⼀个还是⼀组，都封装成⼀个jQuery 包装集，⽐如获取包含⼀个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv");
- Dom对象 转 Jquery对象
Dom 对象转为 jQuery 对象，只需要利⽤ $() ⽅法进⾏包装即可
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);
- Jquery对象 转 Dom对象
jQuery 对象转 Dom 对象，只需要取数组中的元素即可
// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom
通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
});
3.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
div
</div>
<script type="text/javascript">
//通过DOM获取对象
var jsDiv=document.getElementById("div1");
console.log(jsDiv);
//通过DOM获取不存在的标签对象
var jsDiv2=document.getElementById("div2");
console.log(jsDiv2);
//通过jQueryu获取标签对象
var jqDiv=$("#div1");
console.log(jqDiv);
//通过jQueryu获取不存在的标签对象
var jqDiv2=$("#div2");
console.log(jqDiv2);
//dom对象转换成jQuery对象
console.log("===============");
var jq=$(jsDiv);
console.log(jq);
//jQuery转DOM对象
var js=jqDiv[0];
console.log(js);
</script>
</body>
</html>
三、jQuery选择器
1. 基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
id选择器 #id $("#testDiv") 选择id为testDiv的元素
元素名称选择器 element $("div") 选择所有div元素
类选择器 .class $(".blue") 选择所有class=blue的元素
选择所有元素 * $("*") 选择class=blue所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue") 同时选中多个选择器匹配的元素
-->
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
<script type="text/javascript">
//id选择器
var div1=$("#mydiv1");
console.log(div1);
console.log("id选择器");
//元素名称选择器
var div2=$("div");
console.log(div2);
//类选择器
console.log("id选择器");
var div3=$(".blue");
console.log("class选择器");
console.log(div3);
//选择所有元素
var allEle=$("*");
console.log(allEle);
console.log("选择所有元素");
//组合选择器
var ZH =$("#testDiv,blue,span");
console.log(ZH);
console.log("组合选择器");
</script>
</body>
</html>
2. 层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
后代选择器 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元素
-->
<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 type="text/javascript">
//后代选择器
var hd=$("#parent div");
console.log(hd);
console.log("后代选择器");
//子代选择器
var zd =$("#parent > div");
console.log(zd);
console.log("子代选择器");
//相邻选择器
var xl=$(".gray + img");
console.log(xl);
console.log("相邻选择器");
//同辈选择器
var tb=$("#child ~ div");
console.log(tb);
console.log("同辈选择器");
</script>
</body>
</html>
3.表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
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 type="text/javascript">
//获取表单元素
var bd=$("input");
console.log(bd);
//表单选择器
var bd1=$(":input");
console.log(bd1);
console.log("表单选择器");
//文本框选择器
var wb=$(:text);
console.log(wb);
console.log("文本框选择器");
//密码框选择器
var pwd=$(":password");
console.log(pwd);
console.log("密码框选择器");
</script>
</body>
</html>
四、Jquery Dom操作
jQuery也提供了对HTML节点的操作，⽽且在原⽣js的基础之上进⾏了优化，使⽤起来更加⽅便。常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作⽅式只适⽤于jQuery对象。
1.操作元素的属性
[1] 获取属性
<form action="" id="myform">
<input type="checkbox" name="ch" checked="checked"/> aa
<input type="checkbox" name="ch" /> bb
</form>
<script type="text/javascript">
var ch = $("input[type='checkbox']")
console.log(ch)
ch.each(function(idx, em){
console.log(idx + "-" + $(em) + "=" + this)
console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
console.log('--------------')
})
</script>
[2]设置属性
[3]移除属性
[4]代码汇总
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
属性的分类
元素固有属性
元素自带属性
自定义属性
元素中自己定义的属性和值
属性值为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 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("attr :"+in1.attr("data"));
console.log("attr :"+in2.attr("data"));
console.log("prop :"+in1.prop("data"));
console.log("prop :"+in1.prop("data"));
//操作boolean的属性
console.log("attr :"+in1.attr("checked"));
console.log("attr :"+in2.attr("checked"));
console.log("prop :"+in1.prop("checked"));
console.log("prop :"+in1.prop("checked"));
//设置自定义属性
in2.attr("data",123);
//设置boolean类型
in2.attr("checked","checked");
//in2.prop("checked",true);
//移除属性
in2.removeAttr("id");
</script>
</body>
</html>
2.操作元素的样式
对于元素的样式，也是⼀种属性，由于样式⽤得特别多，所以对于样式除了当做属性处理外还可以有专⻔的⽅法进⾏处理。
增加元素的具体样式，格式：
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>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式 覆盖原有的样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式 在元素中style
removeClass(class) 移除样式名称
-->
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
<script type="text/javascript">
//获取class属性的值
var cb=$("#conBlue");
console.log("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("largernn");
</script>
</body>
</html>
3.操作元素的内容
对于元素还可以操作其中的内容，例如⽂本，值，甚⾄是html。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
操作元素内容
非表单元素
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 type="text/javascript">
//获取元素的内容
console.log($("h3").html());
console.log($("h3").text());
//设置元素的内容
$("#html").html("<h2>张三</h2>");
$("#text").text("<h2>李四</h2>");
//获取元素的value值
var val=$("[name='uname']").val();
console.log(val);
$("[name='uname']").val("王五");
</script>
</body>
</html>
4.创建元素
在jQuery中创建元素很简单，直接使⽤核⼼函数即可
$('元素内容');
$('<p>this is a paragraph!!!</p>');
5.增删元素
- 添加元素
- 删除元素
<!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>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
创建元素
$(内容) $("<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()清空所选元素的内容
-->
<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 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'>lbw</span>")
//删除原素
//$(".blue").remove();整个标签删除
//清空元素
$(".blue").empty();//清空元素内容，保留标签
</script>
</body>
</html>
6.遍历元素
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>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
-->
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
<script type="text/javascript">
var spans=$("span");
spans.each(function(index,element){
console.log(element);
console.log(index);
});
</script>
</body>
</html>
五、Jquery事件
1.ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执⾏
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
等
价
于
(document).ready(function(){})等价于
(document).ready(function())等价于(function(){})
2.bind()绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
$(selector).bind( eventType [, eventData], handler(eventObject));
eventType ：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。 这类类型可以包括如下
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执⾏的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
ready加载事件
将页面中dom结构加载完毕之后运行
格式：
$(document).ready(function(){
//处理事件的代码
});
或
$(function(){
//处理事件的代码
});
ready和load之间的区别
load事件：等待将页面中dom结构和引入的资源文件加载完毕之后运行
ready事件：等待将页面中dom结构加载完毕之后运行
bind绑定方式
$(selector).bind( eventType [, eventData], handler(eventObject));
-->
<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("点击事件");
});
//bind 绑定多个事件
$(".btn1").bind("click",function(){
console.log("点击事件");
}).bind("mouseout",function(){
console.log("鼠标移开");
});
$(".btn2").bind({
"click":function(){
console.log("点击事件2");
},
"mouseout":function(){
console.log("鼠标悬停2");
}
});
//直接绑定
$("[name='btn3']").click(function(){
console.log("点击事件3");
}).mouseover(function(){
console.log("鼠标悬停3");
});
</script>
</body>
</html>
六、Jquery Ajax
格式：$.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数
ajax请求
$.ajax({
type:'get',
url:'js/data.json',
data:{
uname:'admin',
upwd:'123'
},
dataType:'json',
success:function(data){
console.log(data)
}
});
get请求
//get
$.get("js/data.json",{name:"tom",pwd:"123"},function(data){
console.log(data);
});
post请求
//post 404
/* $.post("js/data.json",{name:"tom",pwd:"123"},function(data){
console.log(data);
}); */
getJSON请求
$.getJSON("js/data.json",{name:"tom",pwd:"123"},function(data){
console.log(data);
});
扫一扫
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
