我的學習之路_第二十七章_jQuery

標籤：表單提交   function   dex   大於   ble   偶數   入門   雙擊   第一個   

jQuery
js類庫
把常用對象或者方法封裝起來,讓我們寫代碼效率更高

1.jQuery
2.extjs

【jQuery入門】
jQuery的引入:
通過script標籤的src屬性引入

入門: 擷取jQuery對象

$(選取器) == jQuery(選取器)

擷取值
jQuery.val();

jQuery對象和Dom對象的轉換

Dom對象轉jQuery對象 : var jQuery對象 = $(dom對象);

jQuery對象換Dom對象 : 方式一: var Dom = jQuery對象[index]
方式二: var Dom = jQuery對象.get(index)

頁面載入成功事件

js原生
onload = function(){ }

jQuery : 方式一: $(document).ready(function(){ });
方式二: $(function(){ js代碼 })

事件綁定

jQuery事件名 : submit(表單提交事件) click(單機按鈕) focus(擷取焦點) blur(丟失焦點)
click(按一下滑鼠)dblclick(滑鼠雙擊)
js原生
方式一: 通過標籤的時間屬性綁定方式二:派發機制 元素,事件名= function() { }

jQuery
jQuery對象,事件(function(){ });

 

效果

★基礎(重點必須要掌握)
show([毫秒值]); //顯示
hide([毫秒值]); //隱藏
toggle([毫秒值]);//切換

瞭解: 滑入滑出
slideUp([毫秒值]); //滑出
slideDown([毫秒值]); //滑入
slideToggle([毫秒值]); //切換
淡入淡出
fadeIn([毫秒值]); //淡入
fadeOut([毫秒值]);//淡出
fadeToggle([毫秒值]); //切換

jQuery的選取器

★基礎選取器:必須要掌握
id選取器: #id
類別選取器: .class
元素選取器:xxx
所有選取器:*
分組選取器:選擇1,選擇2,選擇3....
★層次選取器:必須要掌握
a b : a的b後代
a>b : a的b孩子
a+b : a的b的大弟弟
a~b : a的b的所有弟弟
過濾選取器:
特點:前面都跟上了:

:first 第一個元素
:last 最後一個元素

:qe(index) 指定的索引的元素
:lt(index) 小於
:gt(index) 大於

:even 偶數
:odd 奇數
內容過濾選取器:
has(選取器):
可見度過濾選取器:
:hidden 針對隱藏欄位 display=none
:visible 可見的
屬性選擇:
[zz=‘z‘] : 選中指定的屬性為指定的值
[zz] : 選中只要含有zz屬性
表單選取器:
:input
選中form的所有子項目
input select textarea button

 

css操作和屬性操作

擷取或設定元素樣式
css("屬性名稱","值"‘):設定css樣式
css("屬性名稱");擷取指定屬性名稱的值
css({
"屬性名稱1":"值1"
"屬性名稱2":"值2"
}); json 設定多個樣式

位置
offset
left:(左邊)
top(上邊)

寬度
高度
屬性操作:
<xx 屬性名稱="屬性值"/>
擷取設定屬性操作
attr("屬性名稱","值");設定屬性
attr("屬性名稱");//擷取
attr({
"屬性名稱1":"值1",
"屬性名稱2":"值2"
})//設定多個屬性
removeAttr("屬性"); //刪除

添加一個樣式class屬性
attr("class","class名字1");
attr("class","class名字2")
addClass("class名字");//添加
prop("class名字")

removeClass("class名字");//刪除

我的學習之路_第二十七章_jQuery