前端基礎---jquery
1、jQuery簡介
［1］ jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入其team。
［2］ jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器
［4］ jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。
［5］ jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
2、jQuery對象
jQuery 對象就是通過jQuery包裝DOM對象後產生的對象。jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那麽它就可以使用 jQuery 裏的方法
$("#test").html()
意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery裏的方法
這段代碼等同於用DOM實現代碼： document.getElementById(" test").innerHTML;
雖然jQuery對象是包裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理
約定：如果獲取的是 jQuery 對象, 那麽要在變量前面加上$.
var $variable = jQuery 對象
var variable = DOM 對象
$variable[0]：jquery對象轉為dom對象
$("#msg").html() //jquery代碼實現
$("#msg")[0].innerHTML //DOM代碼實現
3、尋找元素（選擇器和篩選器）
【1】選擇器
基本選擇器：
$("*") 通配符（全部）
$("#id") id選擇器
$(".class") class選擇器
$("element") 標簽選擇器
$(".class,p,div") 組合選擇器
層級選擇器：
$(".outer div") 後代元素選擇器
$(".outer>div") 子元素選擇器
$(".outer+div") 毗鄰元素選擇器
$(".outer~div") 普通兄弟選擇器
基本篩選器
$("li:first") 篩選第一個li標簽
$(“li:last”) 篩選最後一個li標簽
$("li:eq(2)") 篩選第3個li標簽
$("li:even") 篩選排序為奇數的li標簽（隔行篩選）
$("li:gt(1)") 篩選排序大於1的li標簽
屬性選擇器
$(‘[id="div1"]‘)
$(‘["alex="sb"][id]‘)
表單選擇器：只適用於表單標簽
$("[type=‘text‘]") 等同於$(":text")
註意只適用於input標簽 : $("input:checked")
【2】篩選器
過濾篩選器
$("li").eq(2) 篩選第2個li標簽（推薦使用，方便傳參）
$("li").first() 篩選第1個li標簽
$("ulli").hasclass("test") 篩選class中含有test的ul、li標簽
查找篩選器
查找子標簽：
$("div").children(".test") //找兒子標簽的test
$("div").find(".test") //找所有後代標簽中的test
向下查找兄弟標簽：
$(".test").next() $(".test").nextAll()
$(".test").nextUntil() //開區間查找，不含尾
向上查找兄弟標簽：
$("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟標簽：
$("div").siblings()
查找父標簽：
$(".test").parent()
$(".test").parents() 找所有父標簽，到html
$(".test").parentUntil(“.outer”) 查找父標簽（不含outer）
4、文本操作
Jquery事件綁定
$(“.p1”).click(function (){
alert(123)
})
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p class="p1">P1</p>
<p class="p1">P2</p>
<p class="p1">P3</p>
<p class="p1">p4</p>
<script>
// DOM對象轉為Jquery對象 $(DOM對象)
$("p").click(function () {
console.log($(this));
// 取值操作
//alert($(this).html());
//alert($(this).text())
// 賦值操作
$(this).html("<a href=‘‘>hello</a>")
//$(this).text("<a>hello</a>")
})
</script>
</body>
</html>本文出自 “lyndon” 博客，請務必保留此出處http://lyndon.blog.51cto.com/11474010/1976510
前端基礎---jquery