JQuery
Jquery对象
jQuery 是⼀套兼容多浏览器的 javascript 脚本库.。核⼼理念是写得更少，做得更多，使⽤ jQuery 将极 ⼤的提⾼编写 javascript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加 健壮，“如⻁添翼”。
下载
http://jquery.com/ 下载
优点:
（1）提供了强⼤的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
安装
在页面引入即可
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
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);
});
示例：
write less, do more
Jquery选择器
基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 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());
});
</script>
层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | 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>
<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());
});
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>
表单选择器
| 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") |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<form id='myform' name="myform" method="post">
<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>
</body>
</html>
<script type="text/javascript">
function checkForm(){
// 获取 所有的表单元素
$(":input").each(function(){
// console.log($(this)[0]);
console.log($(this)[0].tagName);
})
console.log("------+++++++++++++++++++++--------")
// 获取 text
console.log("text-->" + $(":text").length); // 1
// 获取 password
console.log("password-->" + $(":password").length); // 1
// 获取radio
console.log("radio-->" + $(":radio").length); // 2
// 获取checkbox
console.log("checkbox-->" + $(":checkbox").length); // 3
// 获取file
console.log("file-->" + $(":file").length); // 1
// 获取按钮
console.log("button-->" + $(":button").length); // 2
// 获取submit按钮
console.log("submit-->" + $(":submit").length); // 1
// 获取image按钮
console.log("image-->" + $(":image").length); // 1
// 获取reset按钮
console.log("reset-->" + $(":reset").length); // 1
return false;
}
</script>
Jquery Dom操作
操作元素的属性
获取属性
| 方法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称) | 获取指定的属性值，操作 checkbox 时， 选中返回 checked，没有选中返回 undefined。 | attr(‘checked’) attr(‘name’) |
| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop(‘checked’) |
<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>
设置属性
| 方法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称，属性值) | 设置指定的属性值， 操作 checkbox 时， 选中返回 checked， 没有选中返回 undefined。 | attr(‘checked’,’checked’) attr(‘name’,’zs’) |
| prop(属性名称，属性值) | 设置具有true和false的属性值 | prop(‘checked’,’true’) |
移除属性
| 方法 | 说明 | 举例 |
|---|---|---|
| removeAttr(属性名) | 移除指定的属性 | removeAttr(‘checked’) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性操作</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<pre>
<h5>1.attr()</h5>
设置或者返回元素的属性 ;
<h5>2.prop()</h5>
设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
</pre>
<hr />
<a href="http://www.baidu.com" id="a1">百度</a>
<a href="http://www.sina.com" id="a2">新浪</a>
<input type="checkbox" name="all" checked="checked"/>全选
</body>
<script type="text/javascript">
// 获取属性值：attr
console.log($('#a1').attr('href'));
console.log($(':checkbox').attr('name'));
// 若未选中显示undefined，选中显示 checked
console.log($(':checkbox').attr('checked'));
// 获取属性值：prop
// 若未选中显示false，选中显示 true
console.log($(":checkbox").prop('checked'));
console.log($('#a2').prop('href'))
// 设置属性值
$('#a1').attr('href','https://jquery.com');
$(":checkbox").prop("checked",false);
// 移除属性
$('#a2').removeAttr('href');
</script>
</html>
操作元素的样式
| 方法 | 说明 |
|---|---|
| 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>
<script src="jquery-3.4.1.js" type="text/javascript" ></script>
<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>
</body>
<script type="text/javascript">
// 获取样式名称
console.log($("#remove").attr("class"));
// 修改样式，那么id为remove的元素样式class只有green
// $('#remove').attr("class","green")
// 添加样式名称，class名称 --叠加
// $('#conBlue').addClass("blue larger");
// 添加元素具体样式
// { "":"" , "":"" } 名:值 对
$('#conRed').css({"background-color":"red","color":"#fff"});
$('#remove').css('color','red');
// 移除样式
// $("#remove").removeClass("blue larger");
</script>
</html>
操作元素的内容
| 方法 | 说明 |
|---|---|
| html() | 获取元素的html内容 |
| html(“html, 内容”) | 设定元素的html内容 |
| text() | 获取元素的⽂本内容，不包含html |
| text(“text 内容”) | 设置元素的⽂本内容，不包含html |
| val() | 获取元素value值 |
| val(“值”) | 设定元素的value值 |
创建元素
在jQuery中创建元素很简单，直接使⽤核⼼函数即可
$('元素内容')
$('<p>this is a paragraph!!!</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>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<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>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
</body>
</html>
<script type="text/javascript">
// 删除所选元素 或指定的⼦元素
// $("span").remove();
// 删除样式为blue的span
// $("span.blue").remove();
// 清空元素
// $("span").empty();
// $(".green").empty();
</script>
遍历元素
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="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</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>
</body>
<script type="text/javascript">
$('span').each(function (idx , e) {
console.log(idx + " ---> " + $(e).text());
})
</script>
</html>
Jquery事件
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(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ready事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
// ⽂档载⼊完便触发ready⽅法
$(document).ready(function(){
$("div").html("ready go...");
})
// $(document).ready(function(){}) == $(function(){})
$(function(){
$("p").click( function () {
$(this).hide();
});
});
$(function(){
$("#btntest").bind("click",function(){
$("div").html("剁吧...");
});
});
</script>
</head>
<body>
<h3>⻚⾯载⼊时触发ready()事件</h3>
<div></div>
<input id="btntest" type="button" value="剁⼿" />
<p>aaa</p>
<p>bbbb</p>
<p>ccc</p>
<p>dddd</p>
</body>
</html>
bind()绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
$(selector).bind( eventType [, eventData], handler(eventObject));
简单的bind()事件
<script type="text/javascript">
$(function(){
/*$("#test").bind("click",function(){
alert("世界会向那些有⽬标和远⻅的⼈让路！！");
});*/
/*
* js的事件绑定
ele.οnclick=function(){};
* */
// 等同于上⾯的放⽅法
$("#test").click(function(){
alert("世界会向那些有⽬标和远⻅的⼈让路！！");
});
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第⼀个参数：事件的类型
3.相应事件触发的，执⾏的操作
第⼆个参数：函数
* */
$("#btntest").bind('click',function(){
// $(this).attr('disabled',true);
$(this).prop("disabled",true);
})
});
</script>
<body>
<h3>bind()⽅简单的绑定事件</h3>
<div id="test" style="cursor:pointer">点击查看名⾔</div>
<input id="btntest" type="button" value="点击就不可⽤了" />
</body>
绑定多个事件
<script type="text/javascript">
$(function(){
// 绑定click 和 mouseout事件
/*$("h3").bind('click mouseout',function(){
console.log("绑多个事件");
});*/
// 链式编程
$("h3").bind('click',function(){
alert("链式编程1");
}).bind('mouseout',function(){
$("#slowDiv").show("slow");//让slowDiv显示
});
/*$("#test").click(function(){
console.log("点击⿏标了....");
}).mouseout(function () {
console.log("移出⿏标了...");
});*/
$("#test").bind({
click:function(){
alert("链式编程1");
},
mouseout:function(){
$("#slowDiv").show("slow");
}
});
});
</script>
<body>
<h3>bind()⽅法绑多个事件</h3>
<div id="test" style="cursor:pointer">点击查看名⾔</div>
<div id="slowDiv"style=" width:200px; height:200px; display:none; ">
⼈之所以能，是相信能
</div>
</body>
Jquery Ajax
jquery 调⽤ ajax ⽅法：
格式：$.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数
get请求
$.ajax({
type:"get",
url:"js/cuisine_area.json",
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>");
$('li').eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText);
}
});
post请求
$.ajax({
type:"post",
data:"name=tom",
url:"js/cuisine_area.json",
contentType: "application/x-www-form-urlencoded",
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>");
$('li').eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText)
}
});
$.get
这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。
// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');
/ 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data);
});
$.post
这是⼀个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。
// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');
// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data);
});
$.getJSON
表示请求返回的数据类型是JSON格式的ajax请求
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
4636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
