原生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...