個人學習之路_第二十七章_jQuery

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名字");//刪除