jquery 基础教程

JQuery 入门1.JQuery特点： 1.JQuery特点： 短小精悍(19k),接口设计得精妙(自然语言的风格) 短小精悍(19k),接口设计得精妙(自然语言的风格),与 程序思路配合精密。极大限度地体现了javascript的特性。 程序思路配合精密。极大限度地体现了javascript的特性。 1.1 轻量级(19k) 轻量级(19k) jqueryjquery-1.3.2.min.js 19 56k jqueryjquery-1.3.2.js 4337 118k 1.2 支持xpath查询，dom1-3,轻松选择需要的元素； 支持xpath查询，dom11.3 css支持；简单的动画实现，支持自定义动画； css支持；简单的动画实现，支持自定义动画； 1.4 跨浏览器 1.5 支持插件开发，现有插件多； 1.6 拥有官方UI程序供使用，效果好。 拥有官方UI程序供使用，效果好。 (http://www.77cn.com.cn/home) 1.7 DHTML DOM选择器与链式语法 DOM选择器与链式语法 $(“p.surprise”).addClass(“ohmy”).show(“slow”);

JQuery 入门2.JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的 DOM,必须尽可能快地在DOM载入后开始执行事件。所以, 我们用一个ready事件作为处理HTML文档的开始. 这个地方跟Ext的Ext.onReady(function() {})类似。 $(document).ready(function() { // do stuff when DOM is ready }); 这是一种最普遍也是一种最基本的方式。 如果你熟悉了JQuery之后，你可以采用一些其他的简写的 方式，如： $(function() {}); $().ready(function() {}); 前提条件是你已经加入了jquery的基本js! O(∩_∩)O~

JQuery 入门2.1 Hello,Jquery! 例子1: $(function(){ alert("Hello, Jquery!"); }); 页面会直接显示Hello, Jquery!为什么？?因为在载入页面 的时候，因为这个JS在head标签里面，故先会载入js,它 就跟我们写的普通的js类似，直接放在js标签里面。 ** 哪要是我们想处理一些事件咋办？?如：click event, change event and so on! 在普通的js中，我们是在某些标签里面添加了一些相关的 属性，如： onClick(), onChange()… 在Jquery里面，为了方便，我们除掉了‘on’,直接就是 click(),change()…这点请大家记住。 不要急，等会给大家展示几个实例。

选择器和事件1. how to find me! 为什么要有选择器？选择器的作用是干什么？ 在普通的JS里面，我们做选择有以下的一些方法： document.getElementById("id") document.getElementByName("name") document.getElementByTagName("tagname") …… 这些东西写起来是不是好长啊，写的好烦啊！有没有什么更 好的方法让我少写一下，我想偷点懒;如果你有这个想法， 那么我现在告诉你，选择JQuery就对了。呵呵！ 如果大家对所谓的JS框架有所了解的话，相信应该知道这个 所谓的框架的基本原理，就是对上述的那些语句进行了封装。 如果说到选择器，就不的不谈的”$()”,待续…

选择器和事件工

厂函数$() $()函数会消除使用for循环访问一组元素的需求，因为放到圆 括号中的任何元素都将自动执行循环遍历，并且会被保存到 一个jQuery对象中。 放在括号中的变量基本上是无限制的！ 1.1例子 见choose.html siblings(expr)--同辈元素 2.jQuery提供两种方式来选择html的elements,第一种是用css 和Xpath选择器联合起来形成一个字符串来传送到jQuery的构 造器(如：$("div > ul a"));第二种是用jQuery对象的几个 methods(方法)。这两种方式还可以联合起来混合使用。 2.1:实例 $(function() { $("#orderList").addClass("red"); }); 给orderList添加了一个样式 $(function() { $("#orderList > li").addClass("red"); }); 给orderList中的li添加了一个样式

选择器和事件例子2:光标的切换 $(function() { $("#orderList li:last").hover(function() { $(this).addClass("red"); }, function() { $(this).removeClass("red"); } ); }); 当把鼠标放在li对象上面和移开时进行样式切换，但只在 list的最后一个element上生效 见maopao.html 注意： #orderList li:last---这是一种什么样的写法？这就是传说总 的XPath表示法，如果你采用这种写法，html中一般的节 点你都能找到

DOM操作一 DOM操作一对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素 insertAfter()、after()-外部插入 见dom.html文件 3.appendTo() 把某个段落追加到某个元素中 如：<div id=‘tt’></div><div id=‘ttt’></div> $(“#tt”).appendTo(‘#ttt’);<div id=‘ttt’> <div id=‘tt’></div> </div> append()这个函数是什么意思？?

pretend(),pretendTo()---内部插入

DOM操作二 DOM操作二4. 要用新元素或文本替换每个匹配的元素，使用html()、text()、 val()、attr(); 要移除每个匹配的元素中的元素，使用empty(); 要从文档中移除每个匹配的元素及其后代元素使用remove(); 注意remove和empty的区别 例子：dom.html 5.过滤 eq() hasClass() filter(expr) is(expr) not(expr) slice(start,[end]) 选择一个子集 见dom.html

DOM操作三 DOM操作三6.属性 :first :last :eq gt(1) 7.子元素 :nth-child 匹配其父元素下的第N个子或奇偶元素 :first-child :last-child :only-child nth-child()是从1开始，而eq()是从0开始，这个地方要注 意 实例见child.html :not 去除所有与给定选择器匹配的元素 :even :odd :gt :lt :header

DOM操作四 DOM操作四8. 层级 parent > child:匹配所有的子级元素 prev + next:匹配所有紧接在prev元素后的next 元素 prev ~ siblings:匹配prev元素之后的所有 siblings元素 例子：cj.html

XPath 专题一如果我如下的一段html代码 比如下面html代码 <ul> <li class="aaaa" title="ttt">li-1</li> <li class="bbbb">li-2</li> <li title="fffff">li-2</li> </ul> <div <SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=div">div</SPAN

> class="aaaa" title="ttt">li1</div> <div class="bbbb">li-2</div> <div title="fffff">li-2</div> <ul> <li class="aaaa" title="ttt">li-1</li> <li class="bbbb">li-2</li> <li title="fffff">li-2</li></ul> <div class="aaaa" title="ttt">li-1</div> <div class="bbbb">li-2</div> <div title="fffff">li-2</div>

XPath 专题二1.第一种根据属性选择E[@attr] $("[@title]").click().......... 即选择所有元素内属性带有title的元素 即 <li class="aaaa" title="ttt">li-1</li> <li title="fffff">li-2</li> <div class="aaaa" title="ttt">li-1</div> <div title="fffff">li-2</div> $("div[@title]").click().......... 选择所有div标签下的所有带title的元素 即 <div class="aaaa" title="ttt">li-1</div> <div title="fffff">li-2</div>

XPath 专题三2.第二种根据属性值选择E[@attr=val] $("div[@title=ttt]").click()................ 选择div下所有title属性等于ttt的元素 即 <div class="aaaa" title="ttt">li-1</div> 如果是 $("[@title=ttt]").click()................ 所有元素下属性title等于ttt的元素 <li class="aaaa" title="ttt">li-1</li> <div class="aaaa" title="ttt">li-1</div> 注意： 1.3版本在这个地方又一些小的变动 在1.3版本下面@除掉了，一定要注意！

XPath 专题 四3.第三种根据属性值开始字母选择E[@attr^=val] $("div[@title^=t]").click()................ 所有div元素下所有属性title值是以t为开头的元素 第四种根据属性值开始字母选择E[@attr$=val] $("div[@title$=t]").click()................ 所有div元素下所有属性title值是以t为结尾的元素 第五种根据属性值包含字母选择E[@attr*=val] $("div[@title*=t]").click()................ 所有div元素下所有属性title值是包含t的所有元素 第六种根据多个属性选择E[@attr=val][@attr=val] $("div[@title=ttt][@class=aaaa]").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于 aaaa的元素 以上的jquery版本是1.2.6,如果是1.3.2,“@”除掉

each 函数介绍迭代函数，类似for 案例：当我们要做一些选择的时候，如果我们还是要想我们 以前那样去遍历，觉得很麻烦，还是哪句话，你想偷点懒 的话，jquery会帮助你！ 见maopao.html 如你有一段这样的html <input type="checkbox" name="checkbox_name[]” id=”checkbox_name_1″ />1 <input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_2″ />2 <input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_3″ />3 <input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_4″ />4 <input type=”checkbox” name=”checkedAll” id=”checkedAll”/>全选/取消全选

each 函数介绍//全选 $("#selectall").click(function() { $("input[@name='newsId']").each(function() { $(this).attr("checked", true); }); }); //反选 $("#rselectall").click(function() { $("input[@name='newsId']").each(function() { /*if($(this).attr("checked")) $(this).attr

("checked", false); else $(this).attr("checked", true);*/ $(this).attr("checked",!$(this).attr("checked")); }); }); //取消全选 $("#delselect").click(function() { $("input[@name='newsId']").each(function() { $(this).attr("checked", false); }); }); 要想用到一些更加炫的效果，那么去看api,呵呵！

效果之CSS 效果之CSS1.jQuery 对CSS从1-3中的大部分都支持，具 体的详细信息请看W3C 2.CSS选择符：addClass() 如：$(“p”).addClass(“class”); 3.修改内敛的CSS css(“color”):得到color的值 css(“color”,”blue”)把color值改为blue css({“color”:”blue”,”font-size”:”20px”})

效果之速度一1. 显示 隐藏 show() hide()跟display属性类似 例子见choose.html show(param),param可以 是’slow’,’normal’,’fast’ slow=0.6s normal=0.4s fast=0.2s 2. 淡入淡出 fadeIn(),fadeOut() 例子见choose.html

效果之速度二3. show(‘slow’)会同时修改宽度、高度和不 透明度属性，因此，事实上它只是 animate()方法的一种内置了特定样式属性 的简写形式。 $().animate({height: ‘show’, width:’show’, opacity:’show’}, ‘slow’);

本文来源：https://www.bwwdw.com/article/86wi.html