jQuery

核心理念：write less,do more

什么是jQuery

jQuery是一个优秀的JS框架，一个轻量级的JS库，封装了JS CSS DOM，提供了一组简洁，一致的API,极大的简化了JS编程

jQuery的编程步骤:

1. 引入jQuery的js文件
2. 使用jQuery的选择器,定位要操作的节点
3. 调用jQuery的方法进行业务操作

什么是jQuery对象:

jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述
jQuery提供的方法都是针对jQuery对象特有的
而大部分方法的返回类型也是jQuery对象,所以方法可以连续调用(方法链)

• 用法:
  jQuery对象.方法().方法().方法()….
  jQuery中 jQuery的对象,有属性,有方法,操作元素节点(jquery对象有自己的属性和方法 )

• jQuery对象与dom对象(原生js)之间的转换
  1. dom对象–>jQuery对象
     实现: $(dom对象)
  2. jQuery对象–>dom对象
     实现: $obj.get(0) 或者 $obj.get()[0];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//原生js的用法
function f1(){
	//用原生js的api
	var div_ele=document.getElementById("id1");
	div_ele.innerHTML="jquery的特点是写的少,做的多";
}
//用jquery的写法
function f2(){
	//用jquery的api方法
	//obj为jquery的对象
	var obj=$("#id1")//等价于document.getElementById("id1");
	obj.html("jquery的特点是写的少,做的多");//dom对象.innerHTML
}
//dom对象转jquery对象
function f3(){
	//获取原生js对象
	var obj=document.getElementById("id1");
	//把原生js对象转成jquery对象
	var $obj=$(obj);
}
//jquery对象转换成dom对象
function f4(){
	//获取jquery的对象
	var $obj=$("#id1");
	//把jquery对象转成dom对象
	var obj1=$obj.get(0);
	var obj2=$obj.get()[0];
}

jQuery选择器

jQuery选择器类似于css选择器(定位元素,添加样式),使用jQuery选择器能够将内容与行为分开
jQuery选择器的分类:

• 基本选择器
• 层次选择器
• 过滤选择器
• 表单选择器

注：一定要学会查jQuery的api文档

基本选择器（与CSS一样）

• ID选择器:$(“#ID名”)
  特点:最快,尽量使用id选择器,最好别重复
• 类选择器:$(“.类名”)
  特点:根据class属性定位元素,非常常用,很多的样式框架都用此样式
• 元素选择器:$(“标签名”)
  标记选择器,html选择器,元素选择器
  特点:改变标记的默认样式
• 选择器组$(“用，隔开”)
  selector1,selector2,…selectorN 合并选择器
  特点: 所有选择器的合集

层次选择器

• 选择某元素下的所有子孙元素：$(“selector1 空格 selector2”)
  根据selector1找到节点后,再去selector1的子节点中寻找符合selector2的节点,在给定的祖先元素下匹配所有后代元素
  特点: 很好用,重点掌握
• 选择某元素下的所有子元素(只包括子元素，不包括孙元素及以后)：$(“selector1 > selector2”)
  只查找直接子节点,不查找间接子节点
• 选择某元素的下一个兄弟：$(“selector1+selector2”)
  +符号表示下一个兄弟节点
• 选择某元素的所有兄弟：$(“selector1~selector2”)
  ~符号表示下面所有的兄弟

过滤选择器（重点）
过滤选择器以”:”或”[]”开始

1. 基本过滤选择器
   • :first 第一个元素
   • :last 最后一个元素
   • :not(selector) 把selector排除在外
   • :even 挑选偶数行
   • :odd 挑选奇数行
   • :eq(index) 下标等于index的元素
   • :gt(index) 下标大于index的元素
   • :lt(index) 小表小于index的元素
2. 内容过滤选择器
   • :contains(text) 匹配包含给定文本的元素
   • :empty 匹配所有不包含子元素或文本元素
   • :has(selector) 匹配含有选择器所匹配的元素
   • :parent 匹配含有子元素或文本的元素
3. 可见性过滤选择器
   • :hidden 匹配所有不可见元素,或type为hidden的元素
   • :visible 匹配所有可见元素
4. 属性过滤选择器
   • [attribute] 匹配具有attribute属性的元素
   • [attribute=value] 匹配属性等于value的元素
   • [attribute!=value]匹配属性不等value的元素
5. 子元素过滤选择器
   • :nth-child(index/even/odd) 将为每一个父元素匹配子元素,
     index是从1开始的整数,表示对应的子元素
   • :eq(index) 匹配一个给定索引的元素,index从0开始的整数
6. 表单对象属性过滤选择器
   • :enabled
   • :disabled
   • :checked
   • :selected

表单选择器
$(“input:text”)
:text 匹配文本框
:password 匹配密码框
:radio 匹配单选框
:checkbox 匹配多选框
:submit 匹配提交按钮
:reset 匹配重置按钮
:button 匹配普通按钮
:file 匹配文件框
:hidden 匹配隐藏框
例如：
console.log($(“input:text”));//input可以省略

jQuery操作DOM

jquery操作dom 增删改

• 创建dom节点

  • js原生写法
    var div_ele=document.createElement(“div”);
    var txt_node=document.createTextNode(“hello”);
    div_ele.appendChild(txt_node);
    document.body.appendChild(div_ele);
  • jquery写法:
    语法:$(html)

    1 2 3 4 5 6 7

    //jquery的dom基本操作 function f(){ //原生js有两种做法 //1.先createElement 然后在appendChild //2.对象.innerHTML='<span style="color:red;">span的文本节点</span>' $("#d1 span").html('<span style="color:red;">span的文本节点</span>'); }

• 插入节点的若干方法

  • append() 作为最后一个子节点添加进来
  • prepend() 作为第一个子节点添加进来
  • after() 作为下一个兄弟节点添加进来
  • before() 作为上一个兄弟节点添加进来

• 删除节点

  • remove() 移除
  • remove(selector) 按照选择器定位后删除
  • empty() 清空节点

• 复制节点

  • clone() 克隆
  • clone(true) 复制节点也具有行为(将处理一并复制)

• 样式操作:

  • attr(“属性名”,”属性值”) 获取或设置属性
  • addClass(“类样式名”) 追加样式
  • removeClass(“类样式名”) 移除样式
  • toggleClass(“类样式名”) 切换样式
  • hasClass(“类样式名”) 是否有某个样式
  • css(“样式名”) 获取样式的值
  • css(“样式名”,”样式值”) 设置多个样式

• 遍历节点:

  • children()/children(selector) 只考虑直接子节点
  • next()/next(selector) 下一个兄弟节点
  • prev()/prev(selector) 上一个兄弟节点
  • siblings()/siblings(selector) 其他兄弟
  • find(selector) 查找满足选择器的所有后代
  • parent() 父节点

jQuery事件处理

使用jquery实现事件绑定:
语法:
$obj.bind(“事件类型”,事件处理函数);
比如:
$obj.bind(“click”,function(e){});
简写方式:
$obj.click(function(e){});

获取事件对象event
$obj.click(function(e){});
方法的参数中的e就是事件对象,但已经经过jquery对底层
的事件进行了封装
注意,封装后jquery事件对象e,就已经可以兼容各个浏览器

e.target 事件触发的那个dom对象(在哪个对象上触发了事件)
e.pageX e.pageY 获取鼠标触发事件时的坐标

事件冒泡:
在子节点产生的事件会一次向上抛给父节点
在原生js中终止事件冒泡,需要知道浏览器的差异
在jquery中不需要了解浏览器差异,只需要e.stopPropagation()
终止事件传播

合成事件:
hover(mouseenter,mouseleave);模拟鼠标悬停事件
toggle() 在多个事件响应中切换

模拟事件操作:
语法:
$obj.trigger(事件类型);
比如:
$obj.trigger(“focus”);
简写形式:
$obj.focus();

jquery动画:

显示,隐藏的动画效果
show()/hide()
通过同时改变元素的宽度和高度来实现显示或隐藏
语法:
$obj.show(执行时间,回调函数);
执行时间:slow,normal,fast ,毫秒数
回调函数:动画执行完毕后要执行的函数

同理:$obj.hide();

上下滑动式的动画实现
slideDown()/slideUp()
通过改变高度来实现显示和隐藏的效果
用法同show方法

淡入,淡出式动画:
fadeIn()/fadeOut()
通过改变不透明度opacity样式实现显示和隐藏
用法同show方法

自定义动画:
animate()
语法:
animate(js对象,执行时间,回调函数);
说明:
js对象:用{}描述动画执行之后元素的样式
执行时间:毫秒数
回调函数:动画执行结束后要执行的函数
比如:
$(“div”).click(function(){
$(this).animate({left:”500px”},4000);
$(this).animate({top:”300px”},2000).fadeOut(“slow”);
});

jquery的类数组(重要)
什么是类数组:jquery封装的多个对象
类:指的是类似
具备自己特有的操作方法

类数组的操作:
length属性
each(fn)遍历数组,fn用来处理dom对象,
在fn中this表示正被遍历的那个dom对象,
fn函数可以添加一个参数 i 用于表示正在遍历
的dom对象的下标(从0开始)
eq(index) 将下标等于index的dom对象取出来
get() 返回一个dom对象组成的数组