初识 jQuery

版权声明：不可转载，复制，版权归本人所有 https://blog.csdn.net/weixin_43083484/article/details/82251369

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

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

3. 基础案例：hello jQuery
   (1)导入js类库
   注：js 类库可从网上下载，一般用1.7.1的版本就可以了，也可用最新的
   (2)jQuery程序入口
   $(document).ready(fn);$(fn);
   注：fn 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的对象
   $(“tr:even”) 选择tr标签中下标为偶数的对象，从0开始

   4.2 jQuery(html)
   html：基于html的一个字符串。

   案例：
   ====================================================
   
   –请选择–
   
   

   ... $("input[name=’btn1’]").click(function(){（点击事件） //将HTML文本追加到ID="s1"的对象中$("value").appendTo("#s1"); //在ID="s1"的对象中追加HTML文本 $("#s1").append("value2"); });

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

   4.3 jQuery(element)
   element：js对象，表示一个html元素。
   案例：$("a")$(“td”)
   （标签即元素）

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事件写法：
   $(“p”).click(function(){$(this).hide();
   });

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