jQuery基本选择器
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中文文档下载地址
更新…