jquery:方便操作。
// 重新封裝了選擇器,dom的操作,事件的繫結,ajax,動畫,隱式迭代
// jquery的官方的主打思想:少些多做!寫的更少,做得更多
// 連綴執行: 一行**解決所有問題
// jquery第三方封裝的功能框架,要想使用jquery,得到第三方的支援
// console.log(jquery);
// console.log($);
// console.log($ === jquery);
// jquery最終暴露出來的兩個變數其實是同乙個內容,根據使用習慣,二選一即可
// 課程中以:$ 為主
// console.log(typeof $); // function
// 函式執行後:(jq的dom方法)
// $().方法()或屬性
// 函式執行前:(jq的全域性方法)
// $.方法()或屬性
// jq的選擇器:就是在執行jq函式時傳參
// jq的id選擇器:
// 所有選擇器選擇出來的元素都以陣列的形式返回
var box1 = $("#box1");
// jq的dom元素和原生js的dom元素,做個比較:
// 單個是元素,多個陣列
var box2 = document.getelementbyid("box2");
// jq的dom元素必須解析之後,才能使用原生js的dom的屬性或方法
// box1[0].style.background = "yellow";
// jq的dom元素,使用jq自身提供的方法,就不用解析
// box1.css("background","#ff0000");
// box2.style.background = "red";
// 原則上來說,原生jsdom不能使用jq的dom方法
// 但是,原生jsdom物件可以被轉成jq的dom物件
// 這個時候就可以使用jq的方法了
// $(box2).css("background","#ff0000");
// 原生js的dom物件和jq的dom物件的轉換方式:
// 原生js轉jq
// $(原生dom物件)
// jq轉原生js
// jqdom物件[0]
console.log(box1);
console.log(box2);
2.選擇器
// jquery的選擇器:所有選擇器選擇出來的元素都是以陣列的形式返回
// id:失明特性
// $("#box").css(「background」,「red」);
// class
// $(".cont").css("background","red");
// 標籤
// $("span").css("background","red");
// 屬性
// $("input[abc=hello][qwe]").css("background","red");
// 包含:後代
// $(".msg h2").css("background","red");
// 群組:
// $("#box,.cont,span").css("background","red");
// 包含:子
// $(".msg>h2").css("background","red");
// 下乙個兄弟
// $(".msg+span").css("background","red");
// 下所有兄弟
// $(".msg~span").css("background","red");
// 指定索引,從0開始
// $(".cont:eq(1)").css("background","red");
// $(".list li:eq(2)").css("background","red");
// 第乙個或最後乙個
// $(".list li:first").css("background","red");
// $(".list li:last").css("background","red");
// $(".list li:odd").css("background","red");
$(".list li:even").css("background","red");
// 更多css選擇器組合,等你來發現
// jq最大的特性:隱式迭代
3.屬性操作
// prop:
// 如果設定的是內建屬性,會可見
// 如果設定的是自定義屬性,會不可見
// $("#box").prop("title","這是乙個title");
// $("#box").prop("qwe","這是乙個qwe");
// console.log($("#box").prop("qwe"));
// console.log($("#box").prop("title"));
// console.log($("#box").prop("abc")); // undefined
// console.log($("#box").prop("id"));
// $("#box").removeprop("qwe");
// $("#box").removeprop("title");
// console.log($("#box").prop("qwe"));
// attr:
// 不管內建還是自定義,都可見
// $("#box").attr("title","這是乙個title");
// $("#box").attr("qwe","這是乙個qwe");
// console.log($("#box").attr("qwe"));
// console.log($("#box").attr("title"));
// console.log($("#box").attr("id"));
// var box = $("#box");
// box.removeattr("id");
// box.removeattr("title");
// box.removeattr("qwe");
// console.log(box.attr("qwe"));
// console.log(box.attr("title"));
// console.log(box.attr("id"));
// $("#box").attr()
4.樣式操作
// $("#box").css("background","red");
// $("#box").css("width","100px");
// $("#box").css("height","200px");
$("#box").css();
// console.log($("#box").css("width"));
// console.log($("#box").css("background-color"));
// console.log($("#box").css("font-size"));
// console.log($("#box").css("border"));
// console.log( $("#box").css(["width","height","border"]) );
// css這個方法,接收的引數,有個數不同的時候,有型別不同的時候
// 乙個:
// 字元:獲取
// 物件:批量設定
// 陣列:批量獲取
Jquery選擇器與樣式操作
jquery用法思想一 選擇某個網頁元素,然後對它進行某種操作 jquery選擇器 jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。myid 選擇id為myid的網頁元素 myclass 選擇class為myclass的元素 li 選擇所有的li...
Jquery屬性選擇器
屬性選擇器 1.把所有input的文字輸入框標紅 input type text css border 1px solid red 2.把以.com結尾的超連結標紅 a href com css border 1px solid red 3.以http 開頭的超連結 4.value屬性中包含inpu...
JQuery屬性選擇器
attribute 選擇具有指定屬性值的元素。attribute value 選擇具有指定屬性且屬性值為指定值的元素。eg 選擇target屬性值為test的a元素,a target test attribute value 選擇具有指定屬性的元素,或者屬性值為指定值或指定值後跟連字元 eg 選擇包...