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

2021-10-04 02:40:38 字數 3949 閱讀 7499

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 選擇包...