【为什么要使用jquery?】
js的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: #fcf;
height: 100px;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<!--
1. 一开始3个div是隐藏的
2. 点击显示的时候, 3个div就显示出来
3. 点击设置文字的时候, 3个div中就显示一写文字
js的问题:
1. 代码麻烦, 需要遍历, 遍历可能嵌套
2. 找dom对象麻烦, 方法很少, 名字很长
3. 会有兼容性问题
4. 事件会覆盖
-->
<input id="btn1" type="button" value="显示"/>
<input id="btn2" type="button" value="设置文字" /><br />
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < divArr.length; i ++){
divArr[i].style.display = "block";
}
}
btn2.onclick = function(){
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < divArr.length; i ++){
divArr[i].innerText = "我是内容";
//有些浏览器不支持innerText,比如火狐,可以使用textContent
divArr[i].textContent = "我是内容"
}
}
</script>
</body>
</html>
js开发中的缺点
1. 代码麻烦,需要遍历,可能还需要嵌套
2. 找对象麻烦,方法少,还长
3. 会有兼容性问题
4. 事件会覆盖
jquery的优点
1. 查找元素的方法灵活多样
2. 隐式迭代特性,不需要手动for循环
3. 完全没有兼容性问题
4. 实现动画很简单
5. 代码简单、粗暴
【什么是jquery?】
官网:jquery.com
js库:把一些常用的方法写到一个单独的js文件,
使用的时候引用这些js文件就行了
* 学习jquery就是学习这个js文件中封装的方法
jquery暴力入门(标签式))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
background-color: red;
height: 100px;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<input type="button" id="b1" value="显示" />
<input type="button" id="b2" value="显示文字" />
<div></div>
<div></div>
<div></div>
<!--引入jquery文件 -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
<!--导入式 -->
<script type="text/javascript" src="js/jquery测试.js" ></script>
<!--
//标签式
<script type="text/javascript">
// 1. 入口函数
$(document).ready(function(){
//2.注册点击事件
$("#b1").click(function(){
//3.找到所有的div调用jquery的显示方法
$("div").show();
});
//另一个点击事件
$("#b2").click(function(){
$("div").text("测试");
})
});
</script>-->
</body>
</html>
(导入式的js文件书写)
//声明一个jquery入口函数
$(function() {
$("#b1").click(function() {
$("div").show();
});
$("#b2").click(function() {
$("div").text("测试");
})
});
【jquery的版本】
1. 大版本分类
1.x版本:兼容IE 678
2.x版本:不兼容IE 678
3.x版本:不兼容IE 678,更加的精简(在国内不流行,因为国内使用jquery的主要目的是兼容IE678)
2. 压缩版和未压缩版
jquery-x.xx.min.js:压缩版本,适用于生产环境,因为文件比较小。去除了注释、换行、空格
jquery-x.xx.js:未压缩版本,适用于学习与开发环境。源码清晰,易阅读
【**jquery对象和DOM对象的区别(重点)】
1. DOM对象:使用js中的方法获取页面中的元素返回的对象
2. jquery对象:使用jquery的方法获取页面中的元素返回的对象
3. jquery对象其实就是dom对象的集合 -> 伪数组
4. dom对象和jquery对象的方法不能混用
例:1.改变li标签的背景颜色
2.修改id为cloth标签里的内容
<script type="text/javascript">
$(document).ready(function(){
// jquery对象不能使用js对象的功能
// jquery其实是多个js对象组成的一个伪数组
// $("li").style.backgroundColor = "#fcc";
var $li = $("li"); // jquery起名都以$开头,方便和js对象区分
for(var i = 0 ; i < $li.length; i ++){
// 把jquery中的每一个元素拿出来, 就是一个一个js的dom对象
$li[i].style.backgroundColor = "#fcc";
}
// js对象也不能使用jquery对象里的方法
var cloth = document.getElementById("cloth");
// 必须把js对象转化成jquery对象
var $cloth = $(cloth);
$cloth.text("背心");
})
</script>
入口函数的问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// js的入口函数
window.onload = function(){
console.log("js的入口函数1")
}
//此函数会把前一个js函数覆盖
window.onload = function(){
console.log("js的入口函数2")
}
// jq的入口函数
$(document).ready(function(){
console.log("jq的入口函数1")
})
$(document).ready(function(){
console.log("jq的入口函数2")
})
</script>
</head>
<body>
<!--
1. jq的入口函数在文档加载完毕, 图片还没开始下载的时候, 就已经执行
2. js的入口函数是在图片完全加载完毕后, 才执行,注意js的入口函数没有重载效果,后面的会把前面的覆盖
-->
<input id="btn1" type="button" value="点我" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539831065&di=97b8091bd03b45bc095f5efe73d92462&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F10%2F45%2F75S58PICkAg_1024.jpg" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539831090&di=feec6f29b4aeb95abfe9faf9197a6903&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F01%2F77%2F51%2Fe1c99a6eb78965d794eb642d33e848a0.jpg" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539236372206&di=2a051181f41db97e216d32b43529b6e7&imgtype=0&src=http%3A%2F%2Fwww.pptbz.com%2Fd%2Ffile%2Fp%2F201708%2F865766c363ecc1a203f39201b8805990.jpg" />
</body>
</html>
* HTML属性
获取:$obj.attr(name)对象的集合
设置:$obj.attr(name,value)
$的本质
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $ 的本质就是一个 函数
// alert(typeof $);
// $函数的功能
// 1. 参数是一个函数 -> 入口的函数的另一个写法
$(function(){
// alert(123);
})
// 2. 参数是js对象 -> 把js对象变成jquery对象
$(document).ready(function(){
})
// 3. 参数是一个字符串 -> 用指定的选择器找到jq对象
$("div")
</script>
</body>
</html>
* CSS属性
$obj.css(name, value)
【选择器】
jQuery选择器是jQuery为我们提供了一组方法, 让我们更加方便的获取到页面中的元素
原理:$()内对js对象进行选择然后再转换成jq对象
通过id,classname,tagname来获取jquery元素
1. 基本选择器
$(“#id”),$(“.class”),$(“tagname”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="four">4</li>
<li>5</li>
<li>6</li>
<li class="green">7</li>
<li>8</li>
<li class="green">9</li>
<li>10</li>
</ul>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// id选择器
$("#four").css("background-color", "#cfc");
// 类型选择器
$(".green").css("background-color","green");
// 标签选择器
$("li").css("background-color","red");
// 并集选择法
$("#four, .green").css("background-color","blue");
// 交集选择法
$("li.green").css("background-color", "#fcc");
})
</script>
</body>
</html>
2. 子代和后代选择器
>,+,~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="father">
<div class="c1">11</div>
<div id="div2">22
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<div class="c1">33</div>
<div>44</div>
<div>55</div>
<p>66</p>
<p>77</p>
<p>88</p>
</div>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// father的后代中所有的p都变色
$("#father p").css("background-color","#cff");
// father中直接后代中的p变色
$("#father>p").css("background-color","#cff");
// c1类后紧跟着的兄弟div
$(".c1 + div").css("background-color","#cff");
// div2后所有的兄弟div
$("#div2 ~ div").css("background-color","#cff");
})
</script>
</body>
</html>
详见jquery参考文档
3. 过滤选择器
都有冒号
-
基本筛选器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li id="six">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 筛选索引为偶数的元素
$("li:even").css("background-color","#ccf");
// 索引位奇数的元素
$("li:odd").css("background-color","#ccf");
$("li:first").css("background-color","#ccf");
$("li:not(#six)").css("background-color","#ccf");
$("li:eq(2)").css("background-color","#ccf");
// (2, ...] 都变色
$("li:gt(2)").css("background-color","#ccf");
$("li:lt(7)").css("background-color","#ccf");
})
</script>
</html>
- 内容选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>张三</div>
<div>李四</div>
<div>王五</div>
<div>赵六</div>
<div>田七</div>
<div>王八</div>
<div>
<font color="red">小王八蛋</font>
</div>
<div>张三丰</div>
<div>
<font color="green"></font>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 找到有王的
$("div:contains('王')").css({
"width": "300px",
"height": "60px",
"background-color": "#cfc"
});
// 找到空的元素
$("div:empty").css({
"width": "300px",
"height": "60px",
"background-color": "#cfc"
});
// 找到有font的
$("div:has(font)").css({
"width": "300px",
"height": "60px",
"background-color": "#cfc"
});
// 作为parent的
$("div:parent").css({
"width": "300px",
"height": "60px",
"background-color": "#cfc"
});
})
</script>
</body>
</html>
- 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名: <input type="text" name="uname" /><br /><br />
密码: <input type="password" name="upwd" /><br /><br />
确认密码: <input type="password" name="upwd2" /><br /><br />
用户昵称: <input id="input_nick" type="text" name="nick" /><br /><br />
联系电话: <input type="text" name="tel" /><br /><br />
邮箱: <input type="text" name="email" /><br /><br />
用户性别:
<input type="radio" name="gendar" value="male"/>男
<input type="radio" name="gendar" value="female"/>女
<br /><br />
兴趣爱好
<input type="checkbox" name="hobby" value="eat" />吃饭
<input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="write code" />写代码
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 有id属性的
$("input[id]").css({
"border":"3px solid green",
"background-color":"red"
})
// 找到所有的密码框
$("input[type='password']").css({
"border":"3px solid green",
"background-color":"red"
})
// 除了密码框
$("input[type!='password']").css({
"border":"3px solid green",
"background-color":"red"
})
// name是u开头的输入框
$("input[name^='u']").css({
"border":"3px solid green",
"background-color":"red"
})
// name以l结尾的输入框
$("input[name$='l']").css({
"border":"3px solid green",
"background-color":"red"
})
// name包含e的输入框
$("input[name*='e']").css({
"border":"3px solid green",
"background-color":"red"
})
})
</script>
</body>
</html>
【筛选(方法)】
取得一个包含匹配的元素集合(伪数组)中每一个元素的所有子元素的元素集合。
例:(具体参考jquery文档)
parent()父元素
children() 儿子
- 下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
float: left;
}
li{
display: none;
}
</style>
</head>
<body>
<ul>
一级菜单1
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
<ul>
一级菜单2
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
<ul>
一级菜单3
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 给ul注册鼠标移入的事件
$("ul").mouseover(function(){
// 拿到鼠标正移入的那个jq对象,ul对应的children是li
$(this).children("li").show();
});
$("ul").mouseout(function(){
$(this).children("li").hide();
})
})
</script>
</body>
</html>
siblings() 兄弟
- 突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
opacity: 0.4;
}
</style>
</head>
<body>
<img src="img/prod1.jpg" />
<img src="img/prod2.jpg" />
<img src="img/prod3.jpg" />
<br />
<img src="img/prod4.jpg" />
<img src="img/prod5.jpg" />
<img src="img/prod6.jpg" />
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("img").mouseenter(function(){
//siblings用于筛选同辈元素的表达式
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
})
$("img").mouseleave(function(){
$(this).css("opacity", "0.4");
})
})
</script>
</body>
</html>