jQuery基础入门

1. 什么是jQuery

它是一个轻量级的javascript类库（重量级的有ext.js）。
注1：就一个类“jQuery”，简写“$”,它是一个容器。

2. jQuery优点

(1)兼容浏览器
(2)总是面向集合
(3)多行操作集于一行

3. 基础案例：hello jQuery

(1)导入js类库
(2)jQuery程序入口
$(document).ready(function(){}); //原始写法$(function(){}); //最新写法

4. jQuery三种工厂方法

工厂方法：实例化jQuery对象

4.1 jQuery(selector[,context])语法

$("a", document)   //jquery选择器，作用：找对象
  selector：选择器
  context：上下文，环境/容器，documemt

  4.1.1 选择器
元素选择器           $("a")

类选择器：.      $(".a1")

ID选择器：#         $("#a2")

属性选择器：[]            $("input[name='btn']")
包含选择器：E1 E2     $("p.a3")
组合选择器：E1,E2,E3      $(".a1,.a2")
自定义选择器：:exp     $("a",document)  $("a", "div") ==  $('div a')

匹配选择器：:eq(index)        $("tr:eq(1)")  选择tr标签中下标为1的对象

常用基本选择器

      ：even                  $("tr:even")  选择tr标签中下标为偶数的对象，从0开始
      :odd                    $("tr:odd")  选择tr标签中下标为奇数的对象，从0开始
      :gt(index)           匹配所有大于给定索引值的元素
      :lt(index)             匹配所有小于给定索引值的元素
      :first                    获取第一个元素
      :last()        获取最后个元素
      :header     匹配如 h1, h2, h3之类的标题元素   
       例：  $(":header").css("background", "#EEE");
      :not(selector) 去除所有与给定选择器匹配的元素 在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
       例：$("input:not(:checked)")

4.2 jQuery(html)
html：基于html的一个字符串。
案例1：append与appendTo
====================================================

        $("html").appendTo("#s1");

        $("#s1").append("<option>value2</option>");

  ====================================================

4.3 jQuery(element)
element：js对象，表示一个html元素。
案例：$("a")$(“td”)
注1：$就是jQuery简写

5. jQuery属性写法

(1)无参数： $("p").text();   返回文本值   $('p').html(); 返回p元素内容
(2)参数val：   $("p").text("Hello world!");  设置文本值       $("p").html("Hello <b>world</b>!");  
(3)回调函数：    $("p").text(function(n){
                return "这个 p 元素的 index 是：" + n;
        });
(4)参数properties：
        $("img").attr({
            src: "test.jpg",
            alt: "Test Image"
        });
        $("img").removeAttr("src");
$("p").css({ color: "#ff0011", background: "blue" });

jQuery事件写法：
$(“p”).click(function(){ //点击事件$(this).hide();
});

$(“form”).on(“submit”, false) //防止表单提交

6. console对象

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

7.jQuery 对象访问

each(callback)

 $("img").each(function(i ){
 this.src = "test" + i + ".jpg";
});

size() jQuery 对象中元素的个数。
length

selector 返回传给jQuery()的原始选择器。

context 返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

get([index]) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

 $("img").get(0);

index([selector|element])

  $('li').index(document.getElementById('bar'));  //传递一个DOM对象，返回这个对象 在原先集合中的索引位置   找不到id返回0
  $('li').index($('#bar'));  //传递一个jQuery对象   找不到id返回-1
  $('li').index($('li:gt(0)'));  //传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
  $('#bar').index('li');  //传递一个选择器，返回#bar在所有li中的做引位置
  $('#bar').index();  //不传递参数，返回这个元素在同辈中的索引位置。