jQuery是一個兼容多瀏覽器的JavaScript庫，提供一些可直接調用的方法，這些方法就是對JavaScript進行了封裝。
這些方法主要分為兩大類：查找和操作
介紹幾個目前了解的（文章中的元素和標簽是一個意思）：
查找：
1、選擇器：用來查找頁面元素
2、篩選：用來對查找到的元素進行過濾或進行關系查找（找親戚）
操作：
3、屬性：獲取或添加元素的屬性
4、CSS：修改元素的樣式和屬性
具體使用方式用例子來說明：
1、選擇器
例子說明：由于此例只是為了說明各種查找方法的使用，所以看代碼即可，沒有運行的必要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<span>span_test</span>
<p>p_test</p>
<p class="c1">p_class_test</p>
<input name="i1" type="checkbox"/>
<input type="text"/>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<script src="/jquery-2.2.0.js" type="text/javascript"></script> //加載jQuery文件
<script type="text/javascript">
//console.log() 方法的作用是把傳入的值在瀏覽器的console控制臺中打印出來
console.log($('#d1')); //查找id為d1的元素
console.log($('span')); //查找元素名稱是span的元素
console.log($('.c1')); //查找class=c1（應用了c1類）的元素
console.log($('div,span,p.c1')); //查找元素名稱是div、sapn和應用了c1類的p標簽
console.log($('div input')); //查找div下的input元素
console.log($('li:first')); //查找所有li元素并只取第一個
console.log($('p:contains("test")')); //查找所有包含文本test的p元素
console.log($('input[name="i1"]')); //查找所有input元素中name=i1的元素
console.log($('input:text')); //查找所有input元素中類型是text的元素
console.log($('input:checked')); //查找所有input元素中屬性是checked的元素
</script>
</body>
</html>2、篩選
例子說明：此例需要一邊運行看結果，一邊結合代碼來看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格修改</title>
<style>
.modal{
position: fixed;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
background-color: #dddddd;
margin-left: -200px;
margin-top: -150px;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div id="dialog" class="modal hidden"> <!--模態對話框，默認是隱藏的-->
<div >
<form action="" method="get">
<p>HOST：<input type="text" id="hostname"></p>
<p>IP：<input type="text" id="ip"></p>
<p>PORT：<input type="text" id="port"></p>
<input type="submit" onclick="return GetValue();" value="提交">
<input type="button" onclick="Cancel();" value="取消">
</form>
</div>
</div>
<div>
<table border="1">
<thead>
<tr>
<th>主機名</th>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tr>
<td>www</td>
<td>1.1.1.1</td>
<td>80</td>
<td><input type="button" onclick="get_prev(this);" value="編輯"></td>
</tr>
<tr>
<td>bbs</td>
<td>2.2.2.2</td>
<td>80</td>
<td><input type="button" onclick="get_prev(this);" value="編輯"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="/jquery-2.2.0.js"></script>
<script type="text/javascript">
function get_prev(arg){
var list = []; //定義一個空數組
var c = $(arg).parent().siblings(); //找到當前標簽的父標簽的所有兄弟標簽（找叔叔），得到一個數組c
$.each(c,function(i){ //循環得到的數組c,對每個值都執行以下函數代碼塊
var item = $(arg).parent().siblings()[i]; //取出數組c中的每個元素
var text = $(item).text(); //得到元素的文本內容
list.push(text); //把得到的值寫入數組中
});
var newlist = list.reverse(); //反轉數組得到一個新數組
//把數組中的值依次賦予模態對話框中
$('#hostname').val(newlist[0]);
$('#ip').val(newlist[1]);
$('#port').val(newlist[2]);
//去除模態對話框的隱藏樣式（這是屬性類別中方法）
$('#dialog').removeClass('hidden');
}
function Cancel(){
//找到模態對話框并增加新樣式，實現隱藏（這是屬性類別中方法）
$('#dialog').addClass('hidden');
}
function GetValue(){
var ret = true; //定義一個函數返回值
var t = $('#dialog').find(':text'); //找到id為dialog標簽下面的所有input類型為text的元素
$(t).each(function(){ //循環找到的數組（列表）
var value = $(this).val(); //獲取循環到的元素的值（注意是值，不是文本內容）
if(value.trim().length == 0){ //去除獲取到值的空格后判斷是否為空
$(this).css('border-color','red'); //若為空，則改變Input的樣式
ret = false;
}
});
return ret; //函數返回值,如果是false，則不允許提交
}
</script>
</body>
</html>3、屬性
例子說明：用經典的全選按鈕來說明用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選按鈕</title>
</head>
<body>
<div>
<input type="button" onclick="Select();" value="全選">
<input type="button" onclick="Reverse();" value="反選">
<input type="button" onclick="Cancel();" value="不選">
<table border="1" id="tb1">
<thead></thead>
<tbody>
<tr>
<td><input type="checkbox"><b>1</b></td>
</tr>
<tr>
<td><input type="checkbox"><b>2</b></td>
</tr>
<tr>
<td><input type="checkbox"><b>3</b></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/jquery-2.2.0.js"></script>
<script type="text/javascript">
function Select(){
//$('#tb1') 找到id為tb1的元素
//.find(':checkbox') 該元素下所有類型為checkbox的input元素
//.prop('checked',true) 并添加屬性checked=true
$('#tb1').find(':checkbox').prop('checked',true);
}
function Reverse(){
//反選函數的作用是：選中的變成不選中，不選中的變成選中
$('#tb1').find(':checkbox').each(function(){ //找到id為tb1標簽下所有的類型為checkbox的元素進行循環
var content = $(this).next(); //查找被循環元素的下一個元素
console.log($(content).text()); //獲取該元素的文本內容
if($(this).prop('checked')){ //判斷是否已經選中：this代表的就是正在被循環的元素，獲取其checked屬性的值
$(this).prop('checked',false); //為該元素添加屬性
$(content).text('選中的變成不選中'); //修改該元素的文本內容
}else{
$(this).prop('checked',true);
$(content).text('不選中的變成選中');
}
})
}
function Cancel(){
$('#tb1').find(':checkbox').prop('checked',false); //添加屬性checked=false，也就是不選中
}
</script>
</body>
</html>4、CSS
例子說明：使用大多數網站都有用到的“回到頂部”按鈕來舉例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>這是頂部</h2><input type="button" onclick="GoBottom();" value="返回底部"/>
<div id="d1" ></div>
<h2>這是底部</h2><input type="button" onclick="GoTop();" value="返回頂部"/>
<script src="/jquery-2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
/*
scrollTop用法：
讀?。?("選擇器").scrollTop() //獲取當前滾動條距離選擇器頂部距離
設置：$("選擇器").scrollTop(1000) //設置滾動條距離選擇器頂部距離為1000px；
其他知識點：
$(window).height(); //獲取當前瀏覽器可視部分的高度，也就是說在瀏覽器窗口改變大小時，這個值也會改變;
$(document).height(); //獲取整個頁面的高度(包含不可視部分)，這個值是固定的，不會隨瀏覽器窗口大小而改變;
*/
function GoTop(){
$(document).scrollTop(0); //設置滾動條距離當前頁面頂部的距離為0，也就達到返回頂部的效果
var bcolor = $('#d1').css('background-color'); //獲取id為d1的元素的background-color樣式屬性的值
console.log(bcolor);
$('#d1').css('background-color','blue'); //設定id為d1的元素的background-color樣式屬性的值為green
}
function GoBottom(){
var dpx = $(document).height(); //獲取當前頁面的高度
var wpx = $(window).height(); //獲取當前瀏覽器窗口的高度
console.log(dpx);
console.log(wpx);
$(window).scrollTop(dpx); //設置滾動條距離當前頁面頂部的距離為當前頁面的高度，也就達到返回底部的效果
$('#d1').css('background-color','green');
}
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
