继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JQuery基础知识

ajax入门学习视频
关注TA
已关注
手记 266
粉丝 80
获赞 597

优点:

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

宗旨:Write Less, Do More

 

本质:

JavaScript库。

 

JQuery能做什么?

DOM功能相同。

 

导入

<script src="xxx.js" type="text/javascript"></script>

 

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() {});

 

3JQuery对象转换为DOM对象

1[index]

2get(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()[]

之后在加载运行式代码

 

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

JQuery中注册事件监听本质:调用IEattchEventFireFoxaddEventListener

 

7JQuery提供的函数

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标签

 

 

8Json

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

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

 

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

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

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

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

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

 

10ArrayJS的对象,所以JQueryDOM都能使用

 

11JQuery绑定事件支持多播

 

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");  下拉列表<select .../>

 

12:<a .../>不跳转,设置href="javascript:void(0)";

 

13:合成事件$(selector).hover(funcIn, funcOut);

 

14:对JQuery顶层对象进行扩展$.extend({});

 

15:对JQuery元素进行扩展$.fn.extend({});

 

16:常用的JS插件

JQueryUI

JQueryEasyUI

JQueryCookie

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP