jQuery简介
简化了JS
类似于
后端 JDBC（操作数据库的基本API） dbutils（封装JDBC） xxx.jar
前端 JS jQuery xxx.js
jQuery的官网https://jquery.com/
两种引入jquery-2.1.4.js文件的方式
1.直接引用本地文件
<script src="/day05/js/jquery-2.1.4.js"></script>
2.使用cdn镜像加速
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"</script>
min.js和.js的区别
jquery-2.1.4.js
开发阶段
jquery-2.1.4.min.js
上线，部署到服务器
jquery.js是完整的未压缩的jQuery库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上项目。 jquery.min.js是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。
jQuery的基本结构
在JS中是使用 dom对象
在jQuery中是使用 jQuery对象
jQuery()工厂函数$:将参数转换成jQUery对象
jQuery对象才能调用jQUery的方法
jQuery(对象).方法(function(){});
jQuery就是$
jQuery(doucument).ready(function(){})
$(doucument).ready(function(){})
最终可以简写为 $(function(){})
dom对象和jQuery对象
JS和jQuery可以混用，因为jQuery底层就是JS
但是 dom对象只能调用dom方法
jQuery对象只能调用jQuery方法
//dom对象转成jquery对象： 使用$()工厂函数
var domobj=document.getElementById("divtest");
var jqueryobj=$(domobj);
juqeryobj.html("bbb")
//html（）方法，（）里面没有参数就显示选中标签的内容
有参数就显示（）里面的内容
//jquery对象转成dom对象
var jqueryobj=$("#divtest");
//var domobj=jqueryobj[0];
var domobj=jqueyobj.get(0);
domobj.innerHTML="bbb";
自动迭代循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/day05/js/jquery-2.1.4.js"></script>
<script>
$(function(){
$("#btnok").click(function(){
//js里面操作多个div,通过循环找到每一个然后操作数组将每一个都赋值
// var items=document.getElementsByTagName("div");
// for(var i=0; i<items.length;i++){
// items[i].innerHTML="bbb";
// }
//jQuery里面封装了方法可以自动迭代
// $("div").html("bbb")
//也可以自己定义循环体方法
//也可以带参数1个参数就是下标（从0开始的）
// 2个参数就是下标和对象
// $("div").each(function(i,obj){
// this.innerHTML="bbb";
// $(this).html("ccc");
// console.log(i)//输出为0123
// console.log(this==obj)//输出为true;
//两种写法
//1.常用写法
// $("div").each(function(i){
// $(this).html("b"+(i+1));
// })
//2.
// $.each($("div"),function(i){
// $(this).html("ccc"+(i+1));
// });
// dom对象.属性=
//dom对象.setAttribute("属性名"，"属性值")
//dom对象.getAttribute("属性名")
// $("img").attr("src","/day05/img/class1-"+(i+1)+".jpg");
//通过自定义循环方法将每个图片通过attr赋值给img
//1.
// $("img").each(function(i){
// $(this).attr("src","/day05/img/class1-"+(i+1)+".jpg");
// })
//2.
// $.each($("img"),function(i){
// $(this).attr("src","/day05/img/class1-"+(i+1)+".jpg");
// });
// })
})
})
</script>
</head>
<body>
<img /><br/>
<img /><br/>
<img /><br/>
<img /><br/>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<input type="button" id="btnok" value="ok"/>
</body>
</html>
链式编程
$(function(){
//链式编程可以直接在后面.方法继续写
// $("div").mouseover(function(){
// $(this).css("background","red")
// }).mouseout(function(){
// $(this).css("background","white")
// });
$("div").css("font-size","16px").css("color","red");
})
选择器
操作对象，找到指定的对象
dom.getElementXxxxx
基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery基本选择器示例</title>
<style type="text/css">
#box {
border: 2px solid #000;
padding: 5px;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//标签选择器
//$("h3").css("background","red");
//类选择器
//$(".title").css("background","red");
//id选择器
//$("#box").css("background","red");
//所有标签
//$("*").css("background","red");
//交集选择器 标签名.class 标签名.#id
//$("h2.title").css("background","red");
//并集选择器，集体声明
$("h2.title,dd").css("background","red");
});
})
</script>
</head>
<body>
<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="images/ch04/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
</dl>
</div>
</body>
</html>
层次选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery层次选择器示例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
line-height: 30px;
}
body {
margin: 10px;
}
#menu {
border: 2px solid #03C;
padding: 10px;
}
a {
text-decoration: none;
margin-right: 5px;
}
span {
font-weight: bold;
padding: 3px;
}
h2 {
margin: 10px 0;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//后代选择器
//$("#menu span").css("background","red");
//子选择器
//$("#menu>span").css("background","red");
//匹配所有紧接在 prev 元素后的 next 元素
//紧接的下一个兄弟节点
//$("h2 + div").css("background","red");
//匹配 prev 元素之后的所有 siblings 元素
//$("h2 ~ dl").css("background","red");
$("h2").siblings().css("background","red");
});
});
</script>
</head>
<body>
<div id="menu">
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
</dl>
<h2>全部旅游产品分类</h2>
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd>
<dd><a href="#">山水</a> <a href="#">双休</a></dd>
</dl>
<span>更多分类</span>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery属性选择器示例</title>
<style type="text/css">
#box {
border: 2px solid #000;
padding: 5px;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//有title属性的h2标签
//$("h2[title]").css("background-color", "#09F");
//class属性值是odds的标签
//$("[class=odds]").css("background-color","#09F");
//id属性值不是test的所有标签
//$("div[class!=testnot]").css("background-color","#09F");
//title属性值以h开头的标签
//$("[title^=h]").css("background-color","#09F");
//title属性值以jp结尾的标签
//$("[title$=jp]").css("background-color","#09F");
//title属性值包含s的标签
//$("[title*=s]").css("background-color","#09F");
//li标签+有class属性+title属性值包含y
$("li[class][title*=y]").css("background-color","#09F");
});
});
</script>
</head>
<body >
<div class="test" title="yyy">aaaaa</div>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li title="yh_jp">银魂</li>
<li class="evens" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
<h2>h2h2</h2>
</div>
</body>
</html>
基本过滤选择器示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery基本过滤选择器示例</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//第一个li
//$("li:first").css("background-color", "#09F");
//最后一个li
//$("li:last").css("background-color","#09F");
//$("li").last().css("background-color","#09F");
//class属性不是three的li
//$("li:not(.three)").css("background-color","#09F");
//所有偶数行的li
//$("li:even").css("background-color","#09F");
//所有奇数行的li
//$("li:odd").css("background-color","#09F");
//下标为1的li
//$("li:eq(1)").css("background-color","#09F");
//下标大于1的li
//$("li:gt(1)").css("background-color","#09F");
//下标小于1的li
//$("li:lt(1)").css("background-color","#09F");
//所有标题标签
//$(":header").css("background-color","#09F");
//没有id属性的div标签
$("div:not([id])").css("background-color","#09F");
});
});
</script>
</head>
<body>
<div id="div1">111</div>
<div >222</div>
<h1>111</h1>
<h2>网络小说</h2>
<h3>333</h3>
<ul>
<li>王妃不好当</li>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>
</body>
</html>
操作属性
js
dom.属性
dom.setAttribute()
dom.getAttribute()
jquery
juery.attr("属性名")
juery.attr("属性名","属性值")
操作布尔值的属性checked selected disabled这些属性
juery.prop("checked")
juery.prop("checked",ture)
操作样式
js
dom.style.样式属性="样式属性值"
dom.className= "类样式"
jQuery
jquery.css("样式属性"，"样式属性值")
jquery.addClass("类样式")
操作标签中的内容
js
dom.innerHTML
dom.innerText
dom.value
jQuery
jquery.html()
jquery.text()
jquery.val()
动态添加元素，删除元素
js
jquery
创建元素：拼标签
var html="标签字符串";
$(html).appendTo($("#id"))
删除元素
$("#id").remove();
常用事件
js
dom.onClick=function(){}
dom.onmouseover=function(){}
jquery
jquery.click(function(){});
.mouseover()
.mouserout()
.ready()
.blur() 失去焦点
.foucus() 获取焦点