JQuery入门(一)

1.什么是JQuery

它是一个轻量级的javascript类库(重量级的有ext.js)。

就一个类“JQuery”,简写“$”，它是一个容器。

2.JQuery优点

(1)兼容浏览器

(2)总是面向集合

(3)多行操作集合于一行

3.基础案列：hello jQuery

(1)导入js类库

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

(2)jQuery 程序入口

$(document).ready(fn);

简写:$(fn);

注:fn 就是function

4.JQuery三种工厂方法

工厂方法:实例化jQuery对象

(4.1)jQuery(selector[,context])语法

selector:选择器

context:上下文，环境/容器，documemt

(4.2)选择器

<基本选择器>

基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。所谓的网页中id只能使用一次的意思是说，一个网页中的id是不可以重复的，也就是具有唯一性。

1、#id     
用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"

2、Element 
用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div, 
input, a等等.

3、class          
用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)

4、*          
用法: $("*")      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN      
用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class="myClass"

<子元素过滤选择器>

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");

用法: $("ul li:nth-child(2)")   返回值  集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的
eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。

2、:first-child$("div[class=one] :first-child")

用法: $("ul li:first-child")    返回值  集合元素 
说明: 匹配第一个子元素。':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。这里需要特别点的记忆下区别。

3、:last-child

用法: $("ul li:last-child")      返回值  集合元素
说明: 匹配最后一个子元素.':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。

 4、: only-child
 
用法: $("ul li:only-child")   返回值  集合元素 
 说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。意思就是:只有一个子元素的才会被匹配!

 

<表单对象属性过滤选择器>
 此选择器主要对所选择的表单元素进行过滤。

1、:enabled

用法: $("input:enabled")    返回值  集合元素
说明: 匹配所有可用元素。意思是查找所有input中不带有disabled="disabled"的input。不为
disabled,当然就为enabled。

2、:disabled

用法: $("input:disabled")    返回值  集合元素
说明: 匹配所有不可用元素。与上面的enable是相对应的。

3、:checked

用法: $("input:checked")   返回值  集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。这话说起来有些绕口。

4、:selected

用法: $(”select option:selected”)   返回值  集合元素
说明: 匹配所有选中的option元素.$("select>option:selected")

<表达选择器> 

1、:input

用法: $(":input") ;   返回值  集合元素
说明:匹配所有 input, textarea, select 和 button 元素。

2、:text

用法: $(":text") ;  返回值  集合元素
说明: 匹配所有的单行文本框。

3、:password

用法: $(":password") ; 返回值  集合元素
说明: 匹配所有密码框。

4、:radio

用法: $(":radio") ; 返回值  集合元素
说明: 匹配所有单选按钮。

5、:checkbox

用法: $(":checkbox") ; 返回值  集合元素
说明: 匹配所有复选框。

6、:submit

用法: $(":submit") ;   返回值  集合元素
说明: 匹配所有提交按钮.

7、:image

用法: $(":image")   返回值  集合元素
说明: 匹配所有图像域。

8、:reset

用法: $(":reset") ;  返回值  集合元素
说明: 匹配所有重置按钮。

9、:button

用法: $(":button") ;  返回值  集合元素
说明: 匹配所有按钮.这个包括直接写的元素button。

10、:file

用法: $(":file") ;  返回值  集合元素
说明: 匹配所有文件域。

11、:hidden

用法: $("input:hidden") ; 返回值  集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配。

（4.3）jQuery(html)

html:基于html的一个字符串

<select id="s1">
		<option>--请选择--</option>
	</select>
	<input name=”btn1” type=”button” value=”添加” />


	<script>
		...
		$("input[name=’btn1’]").click(function(){
		    //将HTML文本追加到ID="s1"的对象中
		    $("<option>value</option>").appendTo("#s1");
		    //在ID="s1"的对象中追加HTML文本
		    $("#s1").append("<option>value2</option>");
		});
	</script>

（4.4）jQuery(element)

element:js对象，表示一个html元素。

注:$就是JQuery的简写

（4.5）jQuery属性写法

(1)无参数:      $("p").text();

(2)参数val：  $("p").text("Hello world!");

(3)回调函数:  $("p").text(function(n){
                    return "这个 p 元素的 index 是：" + n;
                 });

(4)参数properties:  $("img").attr({
                                   src: "test.jpg",
                                   alt: "Test Image"
                             });

jQuery常用属性：见API中属性目录。

 

JQuery事件写法:

              $("p").click(function(){
                            $(this).hide();
             });

6.console对象

    console.log("文字");  输出普通信息
   console.dir();  显示一个对象所有的属性和方法
   console.dirxml(); 显示网页的某个节点(node)所包含的html/xml代码