**JQuery入门**

                 **JQuery入门**

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

2. jQuery优点
1.兼容浏览器
2.面向集合（对象）
3.集多行于一行
3. 基础案例：hello jQuery
(1)导入js类库
(2)jQuery程序入口
$(document).ready(function);

4. jQuery三种工厂方法
工厂方法：实例化jQuery对象

**5.简单的例子**
   jQuery(selector[,context])语法
   selector：选择器
   context：上下文，环境/容器，documemt
   $("a", document)   //jquery选择器，作用：找对象
  （1）**选择器**
  选择器
  元素选择器                      $("a")
  类选择器：.                         $(".a1")
  ID选择器：#                        $("#a2")
   属性选择器：[]                  $("input[name='btn']")
  包含选择器：E1 E2            $("p.a3")
  组合选择器：E1,E2,E3         $(".a1,.a2")
  自定义选择器：:exp            $("a",document)  $("a", "div") ==  $('div a')
(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>
(3)**jQuery(element)**
element：js对象，表示一个html元素。
案例：$("a")    $("td")
(4)**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"
        });
(5) **jQuery事件写法：**
$("p").click(function(){
    $(this).hide();
});
(6) **console对象**
    console.log("文字");  输出普通信息
    console.dir();       显示一个对象所有的属性和方法
    console.dirxml();    显示网页的某个节点(node)所包含的html/xml代码

   获取文本框中的值:$("input").val();
   设定文本框的值 :$("input").val("hello world!");
   将所有段落的字体颜色设为红色并且背景为蓝色:
   (1).$("p").css({ color: "#ff0011", background: "blue" });
   (2).$("p").css("color","red");
   提交本页的第一个表单:$("form:first").submit();
   当文本框中文本被选中时执行的函数:$(":text").select( function () { /* ...do something... */ } );
   触发所有input元素的select事件:$("input").select();
   触发页面内所有段落的点击事件:$("p").click();
   查找表格的2、4、6行（即索引值1、3、5...）:$("tr:odd")

猜你喜欢

JQuery入门