jQuery 復習
基礎知識
1，
window.onload
$(function(){}); $(document).ready(function(){});
只執行函數體重的最後一個方法，事件
依次執行函數體中的所有方法，事件
2，jQuery對象和DOM對象
jQuery對象
DOM對象
$("#food").html();
document.getElementById("food").inerHTML;
3，jQuery對象和DOM對象的相互轉換
JQ->DOM
1，[index] : var $src = $("#id").[0];
2, get(index) : var cr = $("#id").get(0);
DOM->JQ
1,$()
var cr = document.getElementById("cr");
var $cr = $(cr);
4 , if($cr.is(":checked")) 單選框或者復選框。Checked，不是selected
選擇器：（重點）
1 ，基本選擇器
$("#id").css("color", "red");
$(".class").css("color", "red");
$("div").css("color", "red");
$("*").css("color", "red");
$("span #id").css("color", "red");
2層次選擇器
$("ancester descendant")
$("parent > child")
$("prev + next")
$("prev ~ sibling")
祖先 子孫
父母 孩子
同胞
兄弟
3 基本過濾選擇器
:first :last :not(selector) :even :odd :eq(index) :header
:animated :focus :gt(index) :lt(index)
4 內容過濾選擇器
:contains(text) :empty :has(selector) :parent
5 可見性過濾器
:hidden :visible
6 屬性過濾器
[attribute] [attribute=value] !=(不等於) ^=(以..開頭) $=(以..結束) *=(含有..)
7 表單過濾器
:enabled :disabled :checked :selected
8 表單選擇器
:input :text :password :radio :checkbox :submit :image :reset
:file :hidden
DOM
Jquery中的DOM對象
1 $("#id").attr("attribute", "value");
2 創建元素節點
var $li = $("<li></li>");
$li.appendTo("ul");
3 創建文本節點
var $li = $("<li>你好你好你好</li>");
$li.appendTo("ul");
4 創建屬性節點
var $li = $("<li class= "hello" title= "nihao">你好你好你好</li>");
$li.appendTo("ul");
5 查找節點
1 var li = $("ul li:eq(1)");
var $li_text = $li.text();
2 var $para = $("p");
var $a = $para.attr("title");
6 刪除節點
1 remove() 2 detach() 3 empty()
7 替換節點
1 replaceWith() 2 replaceAll()
$("#id").replaceWith("裡面填寫html代碼")；
$("裡面填寫html代碼").replaceAll("#id")；
8 包裹節點
1 wrap() 2 wrapAll() 3 wrapInner()
屬性操作
1 attr() 獲取和設置屬性
2 removeAttr() 刪除元素屬性
獲取和設置HTML , 文本， 值
1 html()
2 text()
3 val()
遍歷節點
1 children()
2 next()
3 prev()
4 siblings()
5 closet()
CSS-DOM
1 css()
$("p").css("color", "red");
2 offset()
var offset = #("p").offset();
var left = offset.left;
var top = offset.top;
2 position
var position = #("p").position();
var left = position.left;
var top = position.top;
3 scrollTop() scrollLeft()
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
jQuery事件和動畫
1 執行時機
$(document).ready(function())
$(document).load(function)
DOM就緒時執行
加載完畢後執行
2 事件綁定
bind(type, [data], fn)
on(type, [data], fn)
(判斷) is(":visible")
3 合成事件
jQuery自定義方法 ready() hover() toggle()
ready()
hover()
hover(enter, leave); 用法如下
$(function(){
$(this).show();
}, function(){
$(this).hide();
})
toggle()
toggle(fn1, fn2, fn3, fn4...fnN)
切換元素的可見狀態：（如下）
$("#id").click(function(){
$(this).next().toggle();
})
addClass("class");
事件冒泡 事件捕獲
動畫 ：
fadeIn()
slideUp()
animate()
fadeOut()
slideDown()
animate({left : "+50px"},400)
jQuery表單和表格
1 多行文本框
屬性：height (高度變化)
$comment.height($comment.height()+50);
動畫效果如下：
$comment.animate({height: "+50"},400);
scroolTop (滾動條)
2 復選框
全選 全不選 反選
attr("checked", true/false);
each(function(){this.checked = !this.checked});
3 下拉框
追加：appendTo()
var $options = $("#selected1 option :selected");
$options.appendTo("#selected2")
4 表單驗證
失去焦點是驗證填寫的信息是否正確
$("#form :input").blur(function(){
.....
})
5表格
.even .odd
添加或者移除類
var hasselected = $(this).hasClass("selected");
$(this)[hasselected? "removeClass" : "addClass"]("selected");
6 根據條件查詢出相應的數據
$("table tbody tr").hide();
filter("contains("li")").show();
$(function(){
$("#search").click(function(){
$("table tbody tr").hide();
filter(":contains("+$(this).val()+")").show();
});
});
選項卡功能
jQuery中的ajax
$.ajax()
load()
$.get() $.post()
$getScript() $getJson()
load()
有參數傳遞是的方法：post 無參數傳遞時：get
jQuery插件：表單驗證
性能優化
感覺再復習一遍下來對整個jQuery有熟悉了很多，好多東西是之前不會的，或者很不熟悉的東西都清晰了非常多。多學一點知識，少些一行代碼！
L阿麗