jquery選擇器，屬性操作，樣式操作

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);

// 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最大的特性：隱式迭代

// 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()

// $("#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 選擇包...