jQuery基礎概括

2021-09-19 14:14:10 字數 4967 閱讀 8754

jquery

普通選擇器(重點掌握前三種)

1、id選擇器

格式:$("#id屬性值")

獲取指定id值的物件(只會獲取到第乙個id的值)

2、類選擇器

格式:$(".class屬性值")

獲取所有指定class屬性值的元素

3、元素選擇器

格式:$("元素名/標籤名")

獲取所有指定標籤名的元素

4、通用選擇器

格式:$("*")

獲取所有的元素的物件

5、組合選擇器

格式:$("選擇器1,選擇器2...")

層級選擇器

後代選擇器 ancestor descendant $("#parent div")選擇id為parent的元素的所有div元素

// 後代選擇器 ancestor descendant $("#parent div")

var houdai = $("#parent div");

// 遍歷

houdai.each(function());

相鄰選擇器 prev + next $(".blue + img")選擇css類為blue的下乙個img元素

// 相鄰選擇器 prev + next $(".blue + img")  只會查詢指定元素的下乙個指定元素(只往下找一次元素)

var xl = $("#child + p");

xl.each(function());

同輩選擇器 prev ~ sibling $(".blue ~ img, div")選擇css類為blue的之後的img元素

// 同輩選擇器 prev ~ sibling $(".blue ~ img")

var tb = $(".gray ~ img");

tb.each(function());

表單選擇器

表單元素:文字框、密碼框、單選框、核取方塊、檔案域、隱藏域、文字域textarea、下拉框select

·表單選擇器 :input

查詢所有的 input 元素:$(":input");注意:會匹配所有的 input、textarea、select 和 button 元素。

·文字框選擇器 :text

查詢所有文字框:$(":text")

·密碼框選擇器 :password

查詢所有密碼框:$(":password")

·單選按鈕選擇器 :

radio查詢所有單選按鈕:$(":radio")

·核取方塊選擇器 :checkbox

查詢所有核取方塊:$(":checkbox")

·提交按鈕選擇器 :submit

查詢所有提交按鈕:$(":submit")

過濾選擇器

:checked 選擇所有被選中的元素

:eq(index) 匹配指定下標的元素

:gt(index) 匹配下標大於指定值的所有元素

:odd 選擇每個相隔的(奇數) 元素

:even 選擇每個相隔的(偶數) 元素

操作元素的屬性

獲取屬性

attr(「屬性名稱」) 獲取指定屬性,操作所有屬性,返回值為

prop(「屬性名稱」) 返回值為true/false  只能獲取固有屬性,(checked、selected、disabled)

設定屬性值

attr(屬性名稱,屬性值);

prop(屬性名稱,屬性值);

移除屬性

removeattr(屬性名) 移除指定的屬性 removeattr('checked')

如果屬性的返回值是true或false(checked、selected、disabled),使用prop()方式;其他屬性使用attr();

操作元素的樣式

步驟:1.獲取物件-->2.操作樣式

物件名.attr(「class」) 獲取class屬性值,即樣式名稱

物件名.attr(「class」,」樣式名」)  修改/新增 class屬性

$("#conred").attr("class","red"); ------->覆蓋效果

物件名.addclass(「樣式名」)---->追加效果

$("#conred").addclass("larger");

css()  新增到行內,優先順序最高

獲取物件

增加/修改具體樣式

物件名.css(屬性屬性值);

獲採樣式

物件名.css(屬性);---->返回屬性的具體值

引入jason()物件

物件名.css()

這種方式引入樣式,不需要一條條新增屬性,方便快捷

操作元素內容

非表單元素內容

html() 獲取元素的html內容

html("html,內容") 設定元素的html內容

text() 獲取元素的文字內容,不包含html標籤

text("text 內容") 設定元素的文字內容,不包含html標籤

表單元素內容

val() 獲取元素value值

val(『值』) 設定元素的value值

操作文件結構

1.內部插入

內容)在被選元素內部的結尾插入元素或內容,被追加的 content 引數,可以是字元、html 元素標記、jquery物件

將指定的元素物件追加到物件的內容

將指定的元素物件追加到另乙個、指定的元素集合/物件的內部的尾部

prepend(「內容」)將指定的內容追加到物件的內部的首位

div.prepend(「11」);

prependto(元素物件或者選擇器)將指定的元素物件追加到另乙個、指定的元素集合/物件的內部的首位

外部插入

after(「內容」); 將指定的內容追加到指定的元素後面

物件名.after(「***」) 將***新增到物件的外部後面

獲取物件

before(「內容」) 將指定的內容追加到指定的元素前面

insertafter(「元素物件」);

insertbefore(); 把所有匹配的元素插到另乙個、指定的元素集合的前面

建立元素

$("元素內容")

刪除元素

remove() 刪除所選元素或指定的子元素,包括整個標籤和內容一起刪。

empty() 清空所選元素的內容,結構還在

遍歷元素

each()

$(selector).each(function(index,element)) :遍歷元素

function 為遍歷時的函式,

index 為遍歷元素的序列號,從 0 開始。

element是當前的元素,此時是dom元素。

載入事件

ready()載入事件

ready()類似於 onload()事件

ready()可以寫多個,按順序執行,不會覆蓋

$(document).ready(function())

等價於$(function(){})

onload與ready()的區別:

1、ready()在dom結構解析完畢後即執行

2、onload在dom結構解析完畢,並且外部資源載入完畢後執行

事件

1.確定為哪些元素繫結事件

獲取元素

2.繫結什麼事件(事件型別)

第乙個引數:事件的型別

3.相應事件觸發的,執行的操作

第二個引數:函式

一、js繫結事件

/*document.getelementbyid("btn").onclick = function();*/

二、bind()繫結事件

/*$("#btn").bind("click",function());*/

三、直接繫結事件

$("#btn").click(function());

jq物件.事件1(function()).事件2(function());-------->直接繫結。。。多個事件

jq物件.bind(「事件1」,fn1).bind(「事件2」,fn1);

jq物件.bind(); ------------->jason 物件引入

JavaScript函式基礎知識概括

目錄 1.函式概念與意義 2.定義函式 1 宣告函式第一種方法 自定義函式宣告 2 宣告函式第二種方法 函式表示式 3.函式分類 1 普通函式 2 匿名函式 3 閉包函式 4.函式內部屬性 5.函式屬性和方法 用來完成某種特定動能的 塊,可以有名字,也可以匿名。函式對任何語言來說都是乙個核心的概念。...

JS基礎知識概括(一)

1.js資料型別 number,string,boolean,undefined,null,object,symbol es6新增 1.1 基本型別 單型別 string number boolean null undefined。引用型別 object。裡面包含的 function array d...

jQuery基礎 初識jQuery

根據各種 的源 了解到要用1.x 引入 jquery庫 src jquery 1.12.4.js script 編寫 通過原生的js入口函式可以拿到dom元素 通過原生的js入口函式可以拿到dom元素的寬高 window.onload function ev script document read...