jQuery基本選擇器

• 1. jQuery的ready事件 -> js的onload
• 2. 選擇器的使用

1. jQuery的ready事件 -> js的onload

• 大多是第一種，匿名函數寫法

<script type="text/javascript">// 匿名函數寫法 ready 開始函數$(function() {// -> js的窗體加載事件alert("hello jQuery!");});// 其它寫法jQuery(function() {alert("load 2");});$(document).ready(function() {alert("load 3");});jQuery(document).ready(function() {alert("load 4"); });</script>

2. 選擇器的使用

• 基本選擇器

$(function() {$("#div1").css("background", "pink");$(".div2").css("background", "orange");// 元素選擇器$("div").css("background", "red");// 組合選擇器$("#div1, .div2").css("background", "yellow"); });

• 層級選擇器

// form 下面所有input元素 包括孫孫子$("form input").css("background", "yellow");// form 下面的直接子級元素 第一層兒子$("form > input").css("background", "red");// label下跟著的子級元素$("label + input").css("background", "pink");//獲取所有同輩的元素$("form ~ input").css("background", "aqua");

• 基本篩選器

// odd 隔行變色$("#tab1 tr:odd").css("background", "aqua");// 獲取下標為0 的表格第一行html內容alert($("#tab1 tr:eq(0)").html());// 基本篩選器還有許多用法... 請看api文檔

• 屬性選擇器

// 屬性是否包含p標簽$("#divHello:has(p)").css("background", "blue");// 屬性選擇器// span元素所有 含id的屬性的 元素$("span[id]").css("background", "blue");// 選中input名字為newsletter的復選框$("input[name='newsletter']").prop("checked", true);// 還有請看api

• 表單操作

// type=button 點擊事件$(":button").click(function() {alert("hello,...");});

• 獲得下拉框列表的值

// 下拉框選中的值var val = $("select option:selected").val();alert(val);

jQuery中文文檔下載地址
更新…

總結

以上是生活随笔為你收集整理的jQuery学习--选择器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。