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);