友情推薦：[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>
~~~
作業：
