友情推荐：[http://www.echhxsy.com:81](http://www.echhxsy.com:81/)
# jquery的使用
~~~
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function(){
console.log("hello world");
});
</script>
~~~
高版本的jquery可以简写成：
~~~
<script>
$(function(){
console.log("hello world");
});
</script>
~~~
事件注册
~~~
$(document).ready(function(){
//给p注册一个点击事件
$("p").click(function(){
$(this).hide();
});
});
~~~
# jquery对象和DOM对象的互转
DOM-> Jquery对象的转化
var p1 = document.getElementById("p1");
$(p1).hide();
Jquery-> DOM对象转化
$(this)[0]
# Jquery选择器
1. 标记选择器
$("p") $("div") $("span")
2. ID选择器
$("#p1")
3. 类选择器
$(".p")
4. 父子选择器(>代表直接父子关系)
$("div>#p1")
5. 后代选择器（空格代表后代）
$("div #p1")
$("p.intro") $("p .intro")
<div class="p intro"></div>
~~~
<div>
<p id="p1"></p>
<div>
<div>
<p>
<span id="p1"></span>
<p>
<div>
~~~
6. 属性选择器
$("[href]")
$("[href='#']")
$("[href!='#']")
$("[href$='.jpg']")
# jquery事件
click()
~~~
$("#img1").click(function(){
/* if($(this)[0].getAttribute("src") == "img/hehe.jpg")
{
$(this)[0].setAttribute("src","img/timg.jpg");
}
else
{
$(this)[0].setAttribute("src","img/hehe.jpg");
} */
if($(this).attr("src") == "img/hehe.jpg")
{
$(this).attr("src","img/timg.jpg");
}
else
{
$(this).attr("src","img/hehe.jpg");
}
});
~~~
focus()
~~~
$("#txt").focus(function(){
//$(this)[0].style.backgroundColor = "yellow";
$(this).css("background-color","yellow");
});
~~~
keyup()
~~~
$("#txt2").keyup(function(){
//1. 获得文本框的值
var txtval = $(this).val();//$(this)[0].value;
//2. 判断长度
if(txtval.length<6)
{
//2.1 如果长度小于6位，设置msg的信息 必须输入6位以上
$("#msg").html("必须输入6位以上"); //$("#msg")[0].innerHTML = "必须输入6位以上";
}
else
{
//2.2如果长度大于等于6位，设置msg的信息为空
$("#msg").html("");
}
});
~~~
练习-》 密码明文显示
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
//注册眼睛的点击事件
$("#myeye").click(function(){
//1. 获得pwd的type值
//2. 如果type = password, 修改type="text", 修改span中间的字体图标
//3. 如果type = text, 修改type="password", 修改span中间的字体图标
if($("#pwd").attr("type") == "password")
{
$("#pwd").attr("type","text");
$(this).html('<i class="fa fa-eye" aria-hidden="true"></i>')
}
else
{
$("#pwd").attr("type","password");
$(this).html('<i class="fa fa-eye-slash" aria-hidden="true"></i>')
}
});
})
</script>
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<style>
.fa
{
font-size:20px;
}
</style>
</head>
<body>
<input id="pwd" type="password" /><span id="myeye"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>
</body>
</html>
~~~
作业：
