1.x 相容性更好,支援很多舊的瀏覽器, ie6,ie7
3.x 更新,體積更小
匯入jquery的js
1) 基本選擇器
`#id值, .class值, 標籤名`
`*` 表示選擇所有標籤
`,` 用來把多個選擇器的結果合併
$("選擇器")
對比document.getelementbyid();
document.getelementsbytagname();
document.queryselector()
document.queryselectorall()
2) 層級選擇器
`空格` 祖先後代選擇
`>` 父子選擇器
3) 篩選器
:first 找到結果中的第乙個
:last 找到結果中的最後乙個
:eq(n) 找第n個元素(n從0開始)
:odd 找下標為奇數的
:even 找下標為偶數的
:gt(n) 下標大於n的
:lt(n) 下標小於n的
p:not(p:first) 取反 除了第乙個段落以外的其它段落
:not(p:first) 取反 除了第乙個段落以外的其它所有標籤
4) 屬性選擇器
$("input[name]"); // 選中有name屬性的input
$("input[name=aaa]"); // 選中有name屬性,並且值為aaa的input
可以同時匹配多個屬性
$("input[type=button][name=aaa]"); // 必須type是按鈕,並且name為aaa的input
5) 子元素選擇器
:nth-child(n) // 該元素是作為第幾個子元素,n從1開始,
:first-child // 作為第乙個孩子
:last-child // 作為最後乙個孩子
例如:$("td:nth-child(1)") // 選中**中第一列
$("td:nth-child(4)") // 選中**中第四列
6) 表單選擇器
input[type=button] 等價於 :button // 匹配所有的按鈕
:radio // 單選按鈕
:password // 密碼框
:checkbox // 核取方塊
:submit // 提交按鈕
:reset // 重置按鈕
:checked // 單選框或核取方塊是否被選中
例如::checkbox:checked // 找到被選中的核取方塊
1) 修改內容
.text(); // 獲取標籤的內容, 功能上等價於:innertext;
.text(新內容); // 將標籤的內容改為新的 , 功能上等價於:innertext;
.html(); // 獲取標籤內容 功能上等價於:innerhtml
.html(新內容); // 將標籤的內容改為新的 功能上等價於:innerhtml
.empty(); // 清空內容, 不刪除標籤
2) 刪除標籤
.remove(); // 刪除整個標籤, 功能上等價於 子標籤.parentnode.removeattribute(子標籤);
3) 修改屬性
.prop("屬性名"); // 獲取屬性的值
.prop("屬性名", "新值"); // 修改屬性
.val(); // 獲取value屬性的值
.val(新值); // 修改value屬性的值
4) 樣式屬性
// 推薦用class的方式操作樣式
.addclass("樣式"); // 操作的標籤的class屬性, 新增乙個class值
.removeclass("樣式"); // 操作的標籤的class屬性, 移除乙個class值
.css("樣式名", "樣式值"); // 操作的是style屬性, 修改乙個style樣式
.css("樣式名"); // 操作的是style屬性, 獲取乙個style樣式值
5) 顯示隱藏
.hide() 隱藏標籤 // 操作的是style標籤: 加了display:none;
.show() 顯示標籤
.toggle() 切換顯示與隱藏的效果
.hide(毫秒值); // 會有動畫效果,動畫效果會持續該毫秒值 .slideup(); .fadeout();
.show(毫秒值); // 會有動畫效果,動畫效果會持續該毫秒值 .slidedown(); .fadein();
6) 尺寸
.width(); // 僅包括內容部分的寬度
.innerwidth(); // 寬度 = 內容寬度+ 內間距寬度
.outerwidth(); // 寬度 = 內容寬度+ 內間距寬度 + 邊框寬度
.height();
.innerheight();
.outerheight();
$(window) // 把原始的window物件,包裝成了jquery的window物件, 就具備了jquery中的方法
$(window).width(); // 視窗的寬
$(window).height();// 視窗的高
動畫方法
.animate(, 動畫時間); // 其中樣式物件,表示動畫結束時的座標
$("div:first").animate(, 2000);
1.5 建立
$("") // 帶了尖角號,不是查詢input標籤,而是建立input標籤
$("input") // 根據input選擇器去查詢
方法1:
// 鏈式呼叫, 大部分方法返回都是this
var input = document.createelement("input");
input.type = "button";
input.value = "按鈕";
方法2:
jquery中新增事件,是先用選擇器找到要加事件的標籤
$(選擇器).事件方法(匿名函式);
$(選擇器).click(function());
要注意整個html的解析順序,script 如果放在head部分,執行時會找不到body中尚未解析的標籤
一種解決辦法是把script 標籤放在body的最後
第二種解決辦法是利用jquery提供的ready事件
$(document).ready(function()); // ready 事件, 會在所有html標籤載入完成後觸發
$(function()); // 等價寫法
1.6.1 事件型別
$(選擇器).dblclick(...); // 雙擊
$(選擇器).mouseover(...); // 滑鼠移入
$(選擇器).mouseout(...); // 滑鼠移出
jquery實現簡單的表單驗證:
前端基於jquery的UI框架
正在做的乙個專案選擇jquery作為前端js核心庫。然後就想選乙個基於jquery的ui庫,然後悲催的事情發生了。至於為什麼使用jquery,一是因為不想為授權費用,而又不想引起可能法律糾紛 另一方面jquery也是所有最容易上手和流行的js庫。如果ext要用於商用就要付版權費,這個不行 dojo的...
web前端框架 jQuery鏈式呼叫
jquery物件的方法會在執行完後返回這個jquery物件,所有jquery物件的方法可以連起來寫 div1 id為div1的元素 children ul 該元素下面的ul子元素 slidedown fast 高度從零變到實際高度來顯示ul元素 parent 跳到ul的父元素,也就是id為div1的...
web前端框架 jQuery表單驗證
1 什麼是正規表示式 能讓計算機讀懂的字串匹配規則。2 正規表示式的寫法 var re new regexp 規則 可選引數 var re 規則 引數 3 規則中的字元 1 普通字元匹配 如 a 匹配字元 a a,b 匹配字元 a,b 2 轉義字元匹配 d 匹配乙個數字,即0 9 d 匹配乙個非數字...