jQuery（二）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

入口函数的简写方式

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    // 标准写法
	$(document).ready(function(){
		alert("Hello jQuery")
	})
	
	// 简写
	$(function(){
		alert("Hello jQuery")
	})
</script>

解释：

1. $(document) 将document对象转为jQuery对象
2. $(document).ready()函数是当DOM对象加载完毕后，马上执行的函数
3. $(document).ready()、$()、jQuery()、window.jQuery()是等价的。最常用的就是$()

DOM对象 VS JQ对象

// DOM对象
function testDOM(){
	var obj = document.getElementById("test1");
	console.log(obj.innerText);
}

// JQ对象
function testJQ(){
	var jobj = $("#test1");
	console.log(jobj.text());
}
testDOM();
testJQ();

PS: jquery表示的对象一定是一个数组

两个对象的相互转换

• DOM转JQ对象 $(dom对象)
• JQ对象转DOM 从数组中获取第一个DOM对象使用[0]或者get(0)

//DOM转JQ，并使用JQ中的方法
function DomToJQ(){
	var obj = document.getElementById("bt1");
	$jobj = $(obj);
	alert($jobj.val());
}

//JQ转DOM，并使用DOM中的方法
function JQToDOM(){
	var jobj = $("#t1"); // 获取的结果是一个数组
	var obj = jobj[0]; // 获取的就是DOM对象
	obj.value = obj.value*obj.value;
}

JQ中的选择器

jQuery 中所有选择器都以美元符号开头：$()。选择器就是定位条件，通知jquery函数定位满足条件的DOM对象

ID选择器

语法：$("#id")

class选择器

语法：$(".Class名")

标签选择器

语法：$("标签名")

所有选择器

语法；$("*")

组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id、class、标签名等

语法：$("#id, .class, 标签名")

表单选择器

根据标签的type属性值，来定位dom对象。无论是否存在表单

标签都可以做出相应选择

语法：$(":type属性的值"")

例如： $(":text") //选择的是type=text的DOM对象$(":password") // 选择所有的密码框 $(":radio") //选取所有的单选框$(":checkbox") // 选取所有的多选框

<input type="text" />
<input type="password"/>
<input type="radio"  />
<input type="checkbox" />
<input type="button" />
<input type="file" />
<input type="submit" />
<input type="reset" />

// HTML
<input type="checkbox" name="" id="" value="basketball" />篮球
<input type="checkbox" name="" id="" value="football" />足球
<input type="checkbox" name="" id="" value="pingpong" />乒乓球

<input type="button" name="" id="" value="点击循环checkbox" onclick="test01()"/>