JQuery 1

1、JQuery简介

  普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库,比如Prototype、Dojo、ExtJS、JQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQuery内部这句函数帮我们调用JavaScript中的代码几十句,因为JQuery就是JavaScript语法写的一些函数类,内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术,Jquery本身就是一堆JavaScript函数。

       (1、Jquery是最火的JavaScript库,已集成到VS2010,MS的Ajax toolkit和JQuery结合也是最方便,JQuery的扩展插件也是非常多。
       (2、JQuery的优点:尺寸小、使用简单方便(Write Less, Do More,吃得少干得多。
                 链式编程($("#div1").draggble().show().hide().fly())、
                 隐式迭代  (自动对于多个元素进行迭代方法调用))、
                屏蔽浏览器差异跨浏览器兼容性好(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)、插件丰富、 开源、免费。
       (3、VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用, 下
               载地址见备注。然后引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放到同目录下,不需要在页面引用。
       (4、vsdoc是vs2008sp1以后增加的一个技术,将js文件对应的vsdoc(相当于js库提供的方法的说明库)放到和js一起,就有会第三方js的自动提示的功能

2、简单的JQuery之Ready

 (1、注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。

$(document).ready(function(){
alert(“加载完毕!”);
});
(2、当页面Dom元素加载完毕时执行代码,可以简写为:
KaTeX parse error: Expected 'EOF', got '#' at position 88: …nload只能注册一次(没有C#̲中的+=机制),后注册的取代先…(window).load()来实现onload那种事件调用的时机。
$(function(){alert(“1111”);});//简写方式

3、JQuery的函数
. m a p ( a r r a y , f u ) 得 到 函 数 的 返 回 值 和 .map(array,fu) 得到函数的返回值和 .map(array,fu).each(array,fn)调用函数处理没有返回值
map函数和each函数
4、JQuery对象和Dom对象

     (1、$('#div1')得到的就是jQuery对象,jQuery对象只能调用jQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调用jQuery对象的方法,所
             以 alert($('#div1').innerHTML是错的,因为innerHTML是DOM对象的属性。
     (2、Array是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用
     (3、将Dom对象转换为JQuery对象的方法,$(dom对象);当调用jQuery没有封装的方法的时候必须用Dom对象,转换方法:vardomobj = jqobj[0]或者
              vardomobj=jqobj.get(0)
     (4、在引用外部js的Script标签内不能再写js代码,引用外部js的Script标签也不能用简写方法闭合。

JQuery对象和Dom对象
5、JQuery 选择器

(1、$(“#div1”).html();

(2、$("TagName")来获取所有指定标签名的jQuery对象,相当于getElementsByTagName:

           例如获得所有的P:$("p").html("我们都是P");

 (3、标签选择器,拥有样式的标签选择器

         ☆ 多条件选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于CSS选择器)
         ☆ 注意选择器表达式中的空格不能多不能少。易错!
         ☆ 层次选择器:

☆☆ ( " d i v l i " ) 获 取 d i v 下 的 所 有 l i 元 素 ( 后 代 , 子 、 子 的 子 … … ) ☆ ☆ ("div li")获取div下的所有li元素(后代,子、子的子……) ☆☆ ("divli")divli(“div > li”)获取div下的直接li子元素
☆☆ ( " . m e n u i t e m + d i v " ) 获 取 样 式 名 为 m e n u i t e m 之 后 的 第 一 个 d i v 元 素 ( 不 常 用 ) ☆ ☆ (".menuitem +div")获取样式名为menuitem之后的第一个div元素(不常用) ☆☆ (".menuitem+div")menuitemdiv(".menuitem ~div")获取样式名为menuitem之后所有的div元素(不常用)

JQuery选择器1
6、JQuery的迭代

  如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:

if(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn1").length <…(".menuitem").next(“div”) 、 nextAll() 方法用于获取节点之后的所 有同辈元素, ( " . m e n u i t e m " ) . n e x t A l l ( " d i v " ) p r e v 、 p r e v A l l 之 前 的 元 素 ( 3 、 s i b l i n g s ( ) 方 法 用 于 获 取 所 有 同 辈 元 素 , (".menuitem").nextAll("div") prev 、 prevAll 之前的元素 (3、siblings() 方法用于获取所有同辈元素, (".menuitem").nextAll("div")prevprevAll3siblings()(".menuitem").siblings(“li”) siblings 、next 等所有能传递选择器的地方能够使用的语法都和 $() 语法一样。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值