01 JQuery基础入门

1.什么是JQuery？
Jquery是一个轻量级的Javascript类库，重量级：ext.js

注1：就一个类“jQuery”，简写“$”,它是一个容器。
轻量级：依赖少，可独立完成 反之

2.jQuery的优点（了解）
2.1 兼容性
2.2 选择器（与CSS选择器语法相似）
2.3 面向集合（面向集合方式操作DOM元素）
2.4 链式语法

3.如何使用jQuery(hello jQuery)
jQuery的程序入口
3.1 导入js库

3.2
完整写法： jquery(document).ready(fn)
简写：    $(fn)
匿名函数function(){}

jquery最主要的是找对象
4.jQuery三种工厂方法
工厂方法：实例化jQuery对象

4.1 语法：
jQuery(exp[,context]) //[,context]：可选择参数

$(“a”, document) //jquery选择器，作用：找对象
exp:选择器
context:上下文 容器/环境 默认：document

5.选择器
元素选择器 $(“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简写

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

jQuery 的事件不带on

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

attr 属性
removeAttr 删除属性
：first 获取第一个元素
：last 获取最后一个元素
：eq (index) 匹配一个给定索引值的元素,从0开始计数
：gt 大于
：lt 小于
：even 偶数
：odd 奇数

$(“#abc”).css({ }); //样式$(“#abc”).val(); //获值
$(“#abc”).text(); //文本$(‘a’).each(index,element){
} //循环