jQuery的个人总结

jQuery的个人总结

1. 了解什么是jQuery
2. 了解jQuery优点
3. hello jQuery
4. jQuery三种工厂方法
5. jQuery属性写法
   jQuery事件写法
   jQuery方法写法
6. console.log()
   7.事件处理程序

=======================================================
1.想要使用jQuery，我们要先引进来jQuery的文件

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

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开始

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

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

7.事件处理程序

（1）.事件源：

JS :

 document.getElementByID（‘id’）

1
jQuery:

$('#id')

1
（2）事件

JS :

 document.getElementByID（‘id’）.onclick = function（）{  }

1
jQuery:

  $("#id").click（function（）{       }）

jQuery 的事件不带on