jquery載入方式,選擇器,樣式操作

2022-06-18 10:12:08 字數 2646 閱讀 5615

原生js和css不相容,jquery已經過測試,可放心使用

例子1,頁面彈出元素中的文字

這是乙個div元素

注意:1. 重新整理頁面後,會首先彈出jquery的文字:"這是乙個div元素test" ,然後才會彈出原生的,原因是因為window.onload需要等網頁中所有元素載入完,並且經過渲染後才會執行裡面的**;而jquery中的ready函式只需要頁面中元素載入完就可以執行裡面的**,不需要經過渲染。

2. $(document).ready(function())可以簡寫成$(function())

jquery用法思想一 

選擇某個網頁元素,然後對它進行某種操作

1. jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。

$(document) //選擇整個文件物件

$('li') //選擇所有的li元素

$('#myid') //選擇id為myid的網頁元素

$('.myclass') // 選擇class為myclass的元素

$('input[name=first]') // 選擇name屬性等於first的input元素

$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

2. 對選擇集進行修飾過濾(類似css偽類)

$('#ul1 li:first') //選擇id為ul1元素下的第乙個li

$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行

$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li

$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之後的li

$('#myform :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

3. 對選擇集進行函式過濾

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myclass'); //選擇class不等於myclass的div元素

$('div').filter('.myclass'); //選擇class等於myclass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

4. 選擇集轉移

$('div').prevall('p'); //選擇div元素前面的第乙個p元素

$('div').nextall('p'); //選擇div元素後面的第乙個p元素

$('div').closest('form'); //選擇離div最近的那個form父元素

$('div').parent(); //選擇div的父元素

$('div').children(); //選擇div的所有子元素

$('div').siblings(); //選擇div的同級元素

$('div').find('.myclass'); //選擇div內的class等於myclass的元素

注意:next() 同級的下乙個元素,nextall()表同級的下面所有的元素

prev() 同級的上乙個元素,prevall()表同級的上面所有的元素

例子1

這是乙個div元素

這是第二個div元素

例子2,驗證選擇集轉移

這是乙個div元素

這是第二個div元素

這是乙個p元素

span元素

span元素

jquery用法思想二 

同乙個函式完成取值和賦值

1. 操作行間樣式

// 獲取div的樣式

$("div").css("width");

$("div").css("color");

//設定div的樣式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css();

特別注意 

選擇器獲取的多個元素,獲取資訊獲取的是第乙個,比如:$("div").css("width"),獲取的是第乙個div的width。

2. 操作樣式類名

$("#div1").addclass("divclass2") //為id為div1的物件追加樣式divclass2

$("#div1").removeclass("divclass") //移除id為div1的物件的class名為divclass的樣式

$("#div1").removeclass("divclass divclass2") //移除多個樣式

$("#div1").toggleclass("anotherclass") //重複切換anotherclass樣式

例子1, 上面的jquery操作都是設定樣式,那麼怎麼讀取原先樣式的屬性呢

這是乙個div元素

初學 jQuery樣式 選擇器。

前言 做web開發的我們,需要對頁面進行美化,我們不僅要學會如何設計頁面布局頁面,還要學會給頁面標籤新增各種各樣樣式讓使用者有極好的體驗感。一,jquery對樣式的操作。1.設定獲採樣式css 引入jquery jar包 函式入口 function 2.設定樣式 set click function...

Jquery選擇器與樣式操作

jquery用法思想一 選擇某個網頁元素,然後對它進行某種操作 jquery選擇器 jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。myid 選擇id為myid的網頁元素 myclass 選擇class為myclass的元素 li 選擇所有的li...

jQuery選擇器和操作CSS樣式

animate函式 animate obj,myjson,time,callback 對於animat來說單純的js物件不能被animate點,要把物件放在 裡面才能用jquery裡 面的東西。方式一 box p animate 2000,function 方式二 var a ul li p a a...