资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

[置顶]   JQuery基础知识

优点:

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都做网站、外贸网站建设、西青网络推广、小程序定制开发、西青网络营销、西青企业策划、西青品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供西青建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

可跨浏览器编程。还有Prototype、Dojo、ExtJS(功能更强的JS库,常用与企业级程序)。

宗旨:Write Less, Do More

 

本质:

JavaScript库。

 

JQuery能做什么?

与DOM功能相同。

 

导入

 

1:“$”符号

方法名(jQuery方法的别名)

window.jQuery = window.$ = jQuery

作用:筛选对象

$通常使用选择器来获得相应的对象集合(id选择器#id,类选择器tagName)

 

2:$(docuemnt).ready方法:

会在当前浏览器加载生成完整个DOM树完成之后调用(相当于window.onload),并可以多次调用相当于C#中的“+=”;

与onload的区别

onload是所用DOM元素创建完毕、图片、CSS等都加载完毕后才被触发,而ready则是DOM元素创建完毕后就被出发,这样可以提高网页的响应速度,在JQuery中也可以用$(window).load()来实现onload事件的调用机制。

简写:$(function() {});

 

3:JQuery对象转换为DOM对象

1)[index]

2)get(inde)

 

 

4:选择器

id选择器-->#id

类选择器-->tagName

class选择器-->.className

*选择器-->*   选择所有的元素

组合选择器-->使用“,”作为分隔符  $("#msgDiv, msg2Div")

层次选择器

-->后代选择器:ancestor decendant使用空格作为分隔符  $("form input")

-->子代选择器:$("parent> child")

--> 匹配所有紧接在prev后的next元素  $("prev + next")

-->匹配prev元素之后的所有siblings兄弟元素  $("prev ~ siblings")

 

5:浏览器解析JS代码时,会先解析声明式代码。eg:function()[]

之后在加载运行式代码

 

6:JQuery中注册事件监听click()、leave()、focus()、blur()....

JQuery中注册事件监听本质:调用IE中attchEvent、FireFox中addEventListener

 

7:JQuery提供的函数

JQuery其实就是一个方法,方法的本质就是对象,对象是可以有方法属性,所以JQuery方法也有它自己的方法。

 

7.1

$.map(array, fn(){}):用来将一个数组,转换成另一个数组。

如果传入的匿名方法的参数是一个,那么这个参数就是当前被循环出的数组元素。function(item){}

如果传入的匿名方法的参数是两个,则第一个是被循环出来的数组元素,第二个为当前被循环到的小角标。function(item, index){}

 

如果map时的匿名函数中包含return语句,那么map方法就会有一个返回值,返回的是由return语句返回单个元素组成的新数组。

 

$.map不能处理json格式对象的数组

 

注意:JS中的任何方法都有返回值,如果用户不手动返回的话,就会返回undefined

 

7.2

$.each(array, fn(){}):对数组array每个元素调用fn函数进行处理,没有返回值。$.each(arr, function(key, value){ alert(key + '=' + value ); });

如果each循环数组的话,那么key就是下标,value就是元素

在each循环时,只要回调函数返回了false,那么循环终结

 

$.map与$.each区别:是否有返回值

 

7.3

$.trim(str)

str.replace(/^[\sxA0]+/, "").replace(/[\sxA0]+$/, ""); xA0 也是空格

 

7.4

.text()获得元素内部的文本

.text(val)向元素内部添加文本

.html()和html(val)获取或设置标签内的html标签

 

 

8:Json

Json其实就是js中对象的一种表示方法(字面量表示法)

注意:值类型的变量,不能动态添加属性。

 

9:JQuery对象就是通过JQuery包装DOM对象后产生的对象

$('#div1').html()等价于document.getElementById('div').innerHTML

$(".class,#id,div").css() == document.getElementById().style

css("border", "3px solid #000"0:

$().val() == .value()

 

10:Array是JS的对象,所以JQuery和DOM都能使用

 

11:JQuery绑定事件支持多播

 

12:过滤器

:first

:last

:eq(index)索引

:gt(index) 大于

:lt(index)小于

:not()

:even   :odd

:header

$("div[id]")属性过滤选择器

$("div[name^='x']"):name属性以x开头的div元素

$("div[name$='x']"):结尾

$("div[][]");

$("div[name*='x']"):包含

$("*:disabled");

$("*:enabled");


 

$("input:checked");Radio  CheckBox

$("input:selected");  下拉列表