jQuery基礎day1
阿新 • • 發佈：2018-11-06
1.jQuery與DOM區別
什麼是DOM物件？:通過js物件獲取到的物件
什麼是jQuery物件？:通過jQuery物件獲取到的物件
區別：只能自己呼叫自己對應的方法
聯絡：jQuery是有好多js物件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src = "jquery-1.12.4.js"></script> <ul> <li id="yi">星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> </ul> <script> $(function () { $("li")[0].style.backgroundColor = "pink"; }); $(function () { $("li").get(1).style.backgroundColor = "pink"; }); // $(function () { // $("li").eq(2).style.backgroundColor = "pink"; 這是錯的 // }); //正確寫法 $(function () { $("li").eq(2).css("backgroundColor","pink"); }); // DOM轉換為jQuery ----------直接$獲取就行了 var obj = document.getElementById("yi"); $(obj).text("星期天");
2.jQuery的入口函式
$實質就是一個函式
$(function () { //入口函式 引數是一個匿名函式
});
$(document).ready(function () { //入口函式 引數是一個js物件
});
$("li");$(#li);$(.li); //入口函式 ，引數是字串3.jQuery的特點
存在隱式迭代
對於js優先執行
存在鏈式操作
多個事件不會覆蓋
相當於偽陣列（可以利用索引來轉化為DOM）
4.基本選擇器
$(function () { // 類選擇器 $(".red").css("backgroundColor","red"); //id選擇器 $("#yi").css("backgroundColor","pink"); //標籤選擇器 $("li").css("fontSize","32px"); //並集選擇器 $("#yi,.red").css("fontSize","12px"); //交集選擇器 $("#yi.red").css("fontSize","32px"); })
5.eq()與get()的區別
eq()有兩種寫法：1.過濾選擇器$("選擇器:eq(n)") , 2.jQuery物件.eq(n) ------------都是用來獲取第n元素 但是返回的是jQuery物件
get()用法 ： $("選擇器").get(n).backgoundColor = "pink" -------------返回的是一個DOM，所以可以當做js物件使用
兩種設定背景顏色程式碼就有所差別：即
$(""div).get(n).backgoundColor = "pink"
$(""div).eq(n).css("backgoundColor","pink" )
6.需要注意的問題
$==jQuery
jq不會幫錯，一般都是沒找到物件，查錯可以利用彈窗，或者物件打斷點除錯，看物件裡面的元素是否為0