jquery:属性选择器

一.jQuery

1.jQuery概述

什么是jQuery: 是一个轻量的, 免费开源的js函数库, 可以简化js代码

jQuery的优势:

可以简化js代码

可以像CSS那样来获取元素

可以修改CSS属性来控制页面的效果

可以兼容常用的浏览器

jQuery的版本控制

1.x

2.x

3.x

jQuery的引入

<script src="jquery-1.4.2.js"></script>

2.jQuery的语法

$符号介绍

$ 等价于 jQuery, $()是一个函数, 等价于调用 jQuery()函数, 返回一个jQuery对象(集合), 包含了若干html元素, 通过jQuery提供的方法或 属性对其进行操作

文档就绪事件

$(document).ready(function(){

//在文档加载完之后立即执行

});

简写形式:

$(function(){

});

js对象和jQuery对象的互相转换

js对象转jQuery对象

var oDiv = ...

var $Div = $(oDiv);

jQuery对象转成js对象

var $Div = $("div");

var oDiv = $Div[0];

var oDiv = $Div.get(0);

3.jQuery选择器

基本选择器

$("div")

$(".c1");

$("#d1")

$("div,.c1,#d1")

层级选择器

$("div span")

$("div>span")

$("div+span")

$("div~span")

内容选择器

$("div:contains('aaa')")

$("div:empty")

$("div:parent")

$("div:has(span)")

基本过滤选择器

$("div:first")

$("div:last")

$("div:eq(n)")

$("div:lt(n)")

$("div:gt(n)")

属性选择器

$(div[class]);

$(div[class='x']);

$(div[class!='x']);

可见选择器

$("div:hidden")

$("div:visible")

子元素选择器

$("div span:first-child")

$("div>span:first-child")

$("div span:last-child")

$("div>span:last-child")

$("div span:nth-child(n)")

表单选择器