#jQuery01

jQuery01

1. 什么是jQuery

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

   注1：就一个类“jQuery”，简写“$”,它是一个容器。
   

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

3. 基础案例：hello jQuery
   (1)导入js类库
   (2)jQuery程序入口

         $(document).ready(fn);
         $(fn);
   

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的对象
                       $("tr:even")   //选择tr标签中下标为偶数的对象，从0开始
                       :lt(index)  //匹配所有小于给定索引值的元素
   

$(‘tr:gt(1)’).css(“background”,”red”);//:gt匹配所有大于给定索引值的元素

4.2 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.3 jQuery(element)
element：js对象，表示一个html元素。

              案例：  $("a")    $("td")

注1：$就是jQuery简写

1. 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代码