JQuery的使用（工具方法、CSS属性及方法、筛选、文档处理、事件、动画）后续

工具方法、CSS属性及方法

1、JS与JQuery转换

1）概述

• $类似java中的类
• $()类似java中的类的构造方法

2）JS与jQuery转换

js转换jQuery：

$(js对象)  //作用：转换作用 

jQuery转换js
1.可以通过下标转换成js对象

var a= $("#a");
 console.log(a[0].innerHTML)
 console.log(a.innerHTML);

2.可以通过get方法+下标获取

console.log($oDiv.get(0).innerHTML);

2、$工具方法

JQuery有许多的$怎么用的方法，要更多方法怎么用的可以参考JQuery官方API文档
我就列举一下

1.$.each()：遍历数组、对象、对象数组中的数据
2.$.trim()：去除字符串两边的空格
3.$.type(obj)：得到数据的类型
4.$.isArray(obj)：判断是否是数组
5.$.isFunction(obj)：判断是否是函数
6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

3、JQuery属性和css

属性

attr()：//获取某个标签属性的值，或设置某个标签属性的值
removeAttr()：//删除某个标签属性
addClass()：//给某个标签添加class属性值
removeClass(): //删除某个标签class属性值
prop(): 和 attr()类似，//区别在于prop用于属性值为Boolean类型的情况，比如多选
html(): //获取某一个标签体内容（注意：该标签体中可以包含子标签）
text()：//获取某一个标签体内容(注意：该标签体不能包含子标签)
val()：//主要用户获取/设置输入框的值

更多属性查看API文档

CSS

1. css()：设置标签的css样式

css("样式名");//获取样式值：
css("样式名","样式值");//设置单个样式：
css({"样式名"："样式值"，"样式名"："样式值"});//设置多个样式：

2. 位置

offset()：//相对整个大容器的相对位置
position()：//相对父容器的相对位置

3. 尺寸

width(): //容器宽
height(): //容器高
innerWidth()：//width+padding
innerHeight()：//height+padding
outerWidth(): //width+padding+border
outerHeight(): //height+padding+border

筛选、文档处理

1、筛选

过滤

first()：获取匹配的第一个元素
last()：获得匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector)：筛选出与指定表达式匹配的元素集合
has(selector)：筛选出包含特定特点的元素的集合
not(selector)：筛选出不包含特定特点的元素的集合

在jQuery对象数组中，过滤出一部分元素来

查找

children()：子标签中找
find()：后代标签中找
parent()：父标签
prevAll()：前面所有的兄弟标签
nextAll()：后面所有的兄弟标签
siblings()：前后所有的兄弟标签

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

2、文档处理

增

内部插入

append()：将内容添加到指定的元素后面
appendTo()：和append()颠倒
//后面
prepend()：将内容添加到指定元素前面
prependTo():和prepend()颠倒
//前面

外部插入

after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容

删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

改

replaceWith()：将所有匹配的元素替换成指定的内容

事件、动画

事件

1、加载DOM的两种方式

1. window.onload方式：所有页面内容加载完后才执行。只能编辑一个。
2. JQuery方式：页面结构绘制完成后执行。可以编辑多个。

2、绑定事件的两种方式

1. 元素.on("时间名",function(){});
2. 元素.时间名(function(){});

3、合成事件、事件切换

hover() //鼠标悬停事件--移入移出
toggle() //鼠标点击合成事件

4、事件冒泡事件

传播：小》中》大
阻止传播：事件后面加 return false

5、事件坐标

offsetX(); //当前元素左上角
client(); //窗口左上角
pageX(); //网页左上角

6、移除事件

元素.unbind("时间名");

动画效果

基本

显示：show(time);
不显示：hide(time);
切换：toggle(time);

滑动

slideUp(time);//动画收缩--向上
slideDown(time);//动画张开--向下
slidetoggle(time);//动画切换

淡入淡出（透明度）

fadeIn(time);//淡入（透明度）
fadeOut(time);//淡出（透明度）
fadeToggle(time);//切换

自定义动画

元素.animate({属性：属性值},time);
缩放：width	height
移动：top	left
移动本元素，距离：top="+="	left="-="

上一章：JQuery（入门~选择器）