Jquery的详解

一、 基本概念

1. jQuery简介

jQuery是一个基于javascript的框架。它提供了丰富的选择器和大量的函数，可以方便的实现网页中各种动态的效果。迄今为止，已经有大量的jquery插件和基于jQuery的UI框架（miniui、easyui、ligerui）。

jQuery的宗旨是：write less,do more!

2. 文档加载完毕函数

常规形式：$(document).ready(function(){… …});

简写形式：$(function(){… …});

3. jquery对象和js对象的相互转化

jquery对象不等同于js对象!

js对象的属性和方法,jquery对象不能调用；jquery对象的属性和方法，js对象也不能调用。

js转jquery：$(js对象)

jquery转js：$(“#box1”).get(0)  或者    $(“.box”)[0]

二、 选择器

jquery的基石就是选择，jquery提供了大量的选择器。建议在不同的业务场景下使用不同的选择器。

注意：通过任何一个选择器筛选到的结果都是一个数组，所以要判断通过选择器是否筛选到了元素，可以通过length属性进行判断。

1. 基本选择器

n ID选择器

$(“#ID值”)    例如：$(“#txt1”)

n 类选择器

$(“.class名称”)   例如：$(“.box”)

n 标记选择器

$(“tagName”)   例如：$(“div”)

n 组合选择器

$(“selector1,selector2,selector3”)   例如：$(“.box,#txt1,div”)

n 通配符选择器

$(“*”)

2. 层次选择器

n 父子选择器

$(“selector1 > selector2”)

n 祖先后代选择器

$(“selector1   selector2”)

n 后兄弟选择器

$(“selector1~siblings”)

n 相邻的后兄弟选择器

$(“selector1 + selector2”)

3. 基本过滤选择器

n :first ：筛选第一个元素

n :last ：筛选最后一个元素

n :odd ：筛选索引值为奇数的元素

n :even ：筛选索引值为偶数的元素

n :eq(n) ：筛选索引值等于n的元素

n :gt(n) ：筛选索引值大于n的元素

n :lt(n) ：筛选索引值小于n的元素

n :not(selector) ：筛选排除selector以外的元素

4. 内容过滤选择器

n :contains(text) ：筛选文本内容包含text的元素

n :empty ：筛选不包含任何子元素和文本内容的元素

n :parent ：筛选包含子孙元素或文本内容的元素

5. 可见性过滤选择器

n :visible ：筛选可见元素

n :hidden ：筛选不可见元素

6. 属性过滤选择器

n [attr] ：筛选存在attr属性的元素

n [attr=value] ：筛选attr属性值等于value的元素

n [attr!=value] ：筛选attr属性值不等于value的元素

n [attr^=value] ：筛选attr属性值以value开头的元素

n [attr$=value] ：筛选attr属性值以value结尾的元素

n [attr*=value] ：筛选attr属性值包含value的元素

7. 表单属性选择器

n :checked ：筛选选中状态的单选按钮和复选框

n :selected ：筛选选中的下拉列表项

n :enabled ：筛选可用的表单元素

n :disabled ：筛选不可用的表单元素

8. 表单对象选择器

n :text ：筛选单行文本框

n :button ：筛选按钮元素

n :submit ：筛选提交按钮

n :password ：筛选密码框

n :radio ：筛选单选按钮

n :checkbox ：筛选复选框

n :file ：筛选文件域

n :image ：筛选图片

 

 

三、 筛选函数

n parent() ：获取父元素

n children() ：获取子元素

n next() ：获取相邻的后兄弟元素

n nextAll() ：获取所有的后兄弟元素

n prev() ：获取相邻的前兄弟元素

n prevAll() ：获取所有的前兄弟元素

n find() ：从子孙后代元素中查找满足条件的子孙元素（过滤后的是这组元素的子孙元素）

n filter() ：从一组元素中筛选满足条件的元素（过滤后的是这一组元素中的部分元素）

n first() ：获取第一个元素

n last() ：获取最后一个元素

n siblings() ：获取所有的同辈元素

n not() ：排除指定的元素

n index() ：获取一个元素在一组元素中的索引值

n eq(n) ：获取索引值等于n的元素

四、 样式操作

n css(“css属性”) ：获取css属性的值

n css(“css属性”, “值”) ：给css属性赋值

n css({“css属性1”:“值”,  “css属性2”:”值”}) ：通过给多个css属性赋值

n addClass ：添加class样式

n removeClass ：移除class样式

n toggleClass ：切换class样式

n hasClass ：判断是否拥有class样式，有返回true，否则返回false

五、 属性操作

n attr(“属性名”) ：获取属性的值

n attr(“属性名”, “值”) ：给属性赋值

六、 DOM操作

n append() ：追加子元素（最后一个子元素）

n prepend() ：添加子元素（第一个子元素）

n remove() ：移除元素

n empty() ：清除所有的子孙元素

n after() ：添加一个后兄弟元素

n before ：添加一个前兄弟元素

七、 事件

1. 事件的类型

load、click、dblclick、focus、blur、change、mouseover、mouseout、mousemove、mouseenter、mouseleave、keyup、keydown、keypress、scroll、resize

2. 事件函数

n bind ：为事件绑定函数

$(“#button1”).bind(“click”, function(){… …})

n unbind ：解除绑定的事件

$(“#button1”).unbind(“click”);

n click(function(){}) ：为事件绑定函数的另一种写法

$(“#button1”).click(function(){… …});

n click() ：触发或模拟单击事件

3. 事件参数

$(“#button1”).click(function(event){

event.target：获取触发当前事件的元素

event.source：

event.which：获取对应的键盘按键值和鼠标按键值

event. preventDefault()：阻止浏览器默认行为

event. stopPropagation()：阻止事件冒泡

});

八、 动画

n show([slow|normal|fast]|毫秒数)：让元素显示

n hide([slow|normal|fast]|毫秒数)：隐藏元素

n toggle([slow|normal|fast]|毫秒数)：切换元素的显隐状态

n slideUp()：让元素隐藏（高度逐渐变为0）

n slideDown()：让元素显示（高度从0逐渐恢复到原始高度）

n slideToggle()：切换元素的显隐状态（改变的是高度）

n fadeIn()：让元素显示（透明度逐渐变为不透明）

n fadeOut()：让元素隐藏（改变透明度逐渐变为透明）

n fadeToggle()：切换元素的显隐状态（改变透明度）

n animate()：自定义动画

$(“#box1”).animate({width:”+=50px”, height:”200px”}, 1000)

九、 其他函数

n height()、height(val)

n width()、width(val)

n val(value)、val()

n text(value)、text()

n html(value)、html()

上述函数有参数表示赋值，没有参数表示获取值。

十、 ajax

n load(url)

通过ajax加载内容。

$(“#box1”).load(“http://192.168.2.1:8080/ajax_2017010701/gettime.do”);

n $.get(url, parameter, callback, type)

以get方式向服务器发送请求

n $.post(url, parameter, callback, type)

以post方法向服务器发送请求

n $.getJSON(url, parameter, callback)

以get方式向服务器发送请求，并且服务器返回的结果为json格式

n $.ajax({

type:”get|post”,

url:”请求的地址”,

success:function(data){请求成功后的回调函数},

error:function(xhr){请求失败时调用的函数},

dataType:”text|json|html|js”

})

最底层的一个ajax函数，上面所有的方法都可以通过这个函数实现