jQuey基础思维导图梳理1
jQuery具體內容：
ECMAScript: 核心語法
變量聲明
數據類型:
原始類型: Null String Number Boolean Undefined
引用類型:
運算符:
語句:
函數:
普通函數
匿名函數
事件:
onload
onsubmit
onclick
onchange
onblur
onfocus
事件和事件源綁定:
綁定事件:
直接在事件源(標簽)上添加事件屬性 <xxx οnclick="函數()"></xxx>
派發事件:
<script>
//1.獲取事件源對象
//2.派發事件
? ?對象.事件名 = function(){
? ?
? ?}
</script>
BOM: 操作和控制瀏覽器
window: 窗口對象
使用該對象的方法或屬性時,window關鍵字可以省略不寫
方法:
alter()
prompt()
confirm()
定時器:
setInterval(函數名,毫秒值);
setTimeout("函數名()",毫秒值);
history: 歷史對象
go(1)
location: 連接對象
location.href : 獲取當前頁面的完整路徑
location.href = 值; 跳轉到指定的頁面
DOM: 操作和控制整個html頁面
文檔節點: 整個html頁面 document
元素節點: 具體的標簽對象
屬性節點: 標簽上的指定屬性
文本節點: 標簽體的文本信息
獲取元素對象:
document.getElementById("id");
.....
獲取元素對象上的屬性:
元素對象.屬性名; ?獲取
元素對象.屬性名 = 值; 設置
文本:
元素對象.innerHTML; //獲取標簽體的所有內容(包含子標簽)
元素對象.innerText; // 獲取標簽體中的所有文本信息(不包含子標簽)
元素對象.innerHTML = "值" ; //在設置值時,可以解析值中的標簽對象
元素對象.innerText = "值"; //在設置值時,將值都充當文本信息,放入標簽體內
概述
jQuery是一個優秀的javascript框架(js類庫)，兼容css3和各大瀏覽器，提供dom，events，animate，ajax等簡易的操作。并且jQuery有非常豐富的插件，大多數功能都有相應的插件解決方案。jQuery的宗旨是write less, do more. (寫的更少,做的更多)
jq本質上就是一個外部的js文件(jQuery.js),在該文件中封裝了很多js代碼,實現了很多功能.
我們管jq文件叫做 js 框架或 js 類庫.
插件: 實現了指定功能的js代碼
jQuery入門
jQuery和html整合
下載
下載地址:www.jquery.com
jQuery 2.0 以后不再支持ie 6 7 8.
使用script的src屬性即可eg:<script src="jquery-x.x.x.js"></script>
==語法==
$("選擇器") 或 ?jQuery("選擇器")
var ?元素對象 ?= $("選擇器");
?eg: var 元素對象 = $("#id值");
? 元素對象.val(); ?// 獲取當前對象上value屬性的值
需求: 獲取輸入框的value屬性的值
?js方式:
?jQuery方式:
javaScript和jquery區別
注意事項: 使用jquery的方式獲取的對象稱為jquery對象,
jQuery對象本質上是js對象數組.
使用dom的方式獲取的對象稱為dom(js)對象, 兩者的方法和屬性不能混用, 使用jquery的方法和屬性時,必須保證對象是jquery對象.
js對象和jquery對象之間的轉換
方式1:jQuery對象[index]
方式2:jQuery對象.get(index)
$(js對象);
jQuery(js對象);
js對象 ?→ ?jquery對象
jquery對象 ?→ ? js對象 (jQuery對象本質上是js對象數組.)
事件(event)
回顧:
js的事件:
onload: 頁面加載事件
onclick: 單擊事件
onsubmit: 表單提交事件
onblur: 失去焦點
onfocus: 獲取焦點
onchange: 改變事件
鼠標事件和鍵盤事件要求見到認識.
onkeyup:
js的事件和事件源綁定:
方式1: 綁定事件
<xxx οnclick="fun()"></xxx>
方式2:派發事件
在js代碼中獲取事件源對象
var 元素對象 = document.getElementById("id");
? 元素對象.事件名稱 = function(){}
在js的事件中,事件前加on,在jq的事件中沒有on,直接寫名稱即可
頁面加載成功事件
格式1:$(document).ready(function(){});
格式2:$(function(){});
注意:在同一個頁面內,jquery的頁面加載成功事件可以出現多次,隨機執行(jQuery3.0以后),js的頁面加載成功事件能出現多次,但只有最后一個生效
2.0以前,先執行jq的頁面加載成功事件(有序執行的)
重點事件
click(fun())
change(fun())
submit(fun())
focus(fun())
blur(fun())
jquery事件和事件源的綁定
如果你想將jq代碼寫在head標簽中,那么要保證頁面加載成功后,才能使用jq的事件
jquery對象.事件名稱(function(){});
jQuery的選擇器
基本選擇器:★
* 所有
# id
.class
標簽選擇器(標簽名)
多個選擇器用","號隔開 ? a,b
層級選擇器:★
a b:選擇a的b的后代
a>b:選擇a的b孩子
a+b:選擇a的b大弟弟
a~b:選擇a的所有的b弟弟
屬性選擇器★
// [屬性名] 獲取元素上帶有該屬性名的元素對象
// [屬性名='值'] 獲取元素上帶有該屬性名且值為'zhi'的元素對象
屬性選擇器使用時一般都有和標簽選擇器聯合使用
div[屬性名='值']
基本過濾: ★
:first 第一個
:last ?最后一個
:even 偶數
:odd 奇數
:eq(index) 索引=
:gt(index) 索引>
:lt(index) 索引<
:not(選擇器)
表單對象屬性★
:enabled ? ?可用的
:disabled ? ? ? ? ?不可用的
:checked ? ? ? ? ? 選中的(針對的是單選框和復選框)
:selected ? ? ? ? ?選中的(下拉選)
jQuery的DOM操作
操作HTML代碼/文本/值 ★
val() : 對value屬性的操作
jq對象.val(); ? ? ? 獲取value屬性的值
jq對象.val("值"); ? ? ? 設置value屬性的值
html() : 對標簽體的操作 ?(等同于js的innerHTML屬性)
jq對象.html(); ? ? ?獲取標簽體的內容
jq對象.html("值"); ? ? 設置標簽體的內容
text() : 對標簽體的操作 ?(等同于js的innerText屬性)
jq對象.text(); ? ? ? 獲取標簽體的內容
jq對象.text("值"); ? ? 設置標簽體的內容
html和text區別設置內容: html可以將內容解析,text只是作為普通文本獲取內容:html獲取所有源碼內容,text只是獲取文本內容
文檔處理
內部插入: ?作為子標簽插入
append a.append(c) ? ? 將c插入到a的內部的后面
prepend ? ? ? ?a.prepend(c) ? ?將c插入到a的內部的前面
外部插入: 作為兄弟標簽插入
after ? ? a.after(c) ? ? ? ? 將c插入到a的后面
before ? ? ? ? ? ? ? ?a.before(c) ? ? ? ? 將c插入到a的前面
刪除:
empty():清空元素 (清空所有的子標簽)
remove():移除 (自殺)
屬性
attr():設置或者獲取元素的屬性
格式1:設置單個屬性jq對象.attr("屬性名","值");
格式2:設置多個屬性jq對象.attr({ "屬性":"值", "屬性1":"值1"});
設置屬性(給標簽添加屬性)
獲取屬性的值 jq對象.attr("屬性名");
移除屬性(刪除屬性) jq對象.removeAttr("屬性名");
prop():使用方式和attr一樣,優先使用attr方法,若attr方法不能用,換prop方法(版本升級后的產物)checked 和 selected 使用prop獲取
class操作
元素.addClass("屬性值");添加class屬性
元素.removeClass():移除指定的樣式
元素.toggleClass("屬性值"): 有class屬性就刪除,沒有class屬性就添加.
css樣式
css
格式1:設置單個屬性jq對象.css("屬性","值");
格式2:設置多個屬性jq對象.css({ "屬性":"值", "屬性1":"值1"});
設置css樣式
獲取css樣式的值 jq對象.css("屬性名稱");
獲取元素的寬和高
jq對象.width()
jq對象.height()
案例:
案例1-表格隔行換色
需求分析:
當頁面加載成功后,給表格的奇數行和偶數行添加不同的背景顏色,表頭除外.
技術分析:
jQuery:
?頁面加載成功事件:
? $(function(){})
? $(document).ready(function(){});
?選擇器:
?css樣式: css方法
步驟分析:
....
案例2-全選和全不選
需求分析:
當點擊頭部的復選框時,讓其他的復選框的狀態和頭部復選框狀態保持一致.
技術分析:
jQuery
?單擊事件: click
? 獲取checked屬性的值
? 獲取其他復選框并設置值
步驟分析:
//1.給頭部復選框添加點擊事件
//2.獲取頭部復選框的狀態
//3.獲取其他復選框,并設置狀態
案例3-QQ表情添加
轉載于:https://blog.51cto.com/13859849/2371965
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的jQuey基础思维导图梳理1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.util.concurrent
- 下一篇： Android Handler原理