jQuery 複習

時間 2019-11-11

標籤 jquery 複習欄目 JQuery 简体版

原文原文鏈接

jQuery 複習css

基礎知識html

1，ajax

window.onload性能優化	$(function(){}); $(document).ready(function(){});app
只執行函數體重的最後一個方法，事件ide	依次執行函數體中的全部方法，事件函數

2，jQuery對象和DOM對象post

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阿麗

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。