JQuery學習筆記（1）——選擇器

JQuery本質上還是JavaScript，是JavaScript的一個框架，可以讓我們更簡潔地去使用JavaScript

使用之前，記得在html頭部引用JQuery

通過選擇器獲得JQuery對象

• id

$('#myDiv').css('background:red');

• element

$('h2').css('color:red');

• class

$('.mydiv').css('color:red');

• selector1，selector2...

$('#myDiv,#myText').css('background:red');

• 層級

    <h2>this is h2</h2>
    <h3>this is h3</h3>

    $('h2 + h3') 當h2和h3為同級，且相鄰

    <form>
        <input name="t1">
        <form>
            <input name="t2">
        </form>
    </form>

    $('form > input') form標簽的子元素
    使用此，只會獲得name=t1的input元素

    $('form input') form標簽之中，子元素，孫元素...
    使用此，會獲得name=t1和name=t2的兩個input元素

• attribute

$('[href]')
$("[type!='button']")
$("[type^='b']") 以b開頭
$("[type$='b']") 以b結尾

• 表單

//input標簽，name屬性為username的全部元素
$("input[name='username']")
表單對象屬性
$('input:checked')

文檔解析完畢執行操作

html文檔首先是被解析，之後才會被顯示
解析完畢也就是ready事件的觸發

$(document).ready(function () {
    //相關的操作，如修改樣式等
});

//ready簡寫方式
$(function(){
    //相關的操作，如修改樣式等
});

創建並添加元素

var title = $('<h1>這是標題</h1>');
$('#mydiv').append(title);

修改css

• 單個屬性

//把全部class屬於mydiv的元素的樣式都修改
$('.mydiv').css('background:red');

• 多個屬性

//屬性有"-",得加上引號,沒有"-"，可以省略引號
$('.mydiv').css({'background-color':'red',width:'50px'});

jQuery對象轉為DOM對象

有兩種方法

• jQueryObject[0]
• jQueryObject.get(0)

var mydiv = $('.mydiv')[0];
var mydiv = $('.mydiv').get(0);