关闭

JQuery总结

606人阅读 评论(0) 收藏 举报
分类:

目  录


一、 jQuery基础 1

1.1 jQuery的特点 1

1.2 jQuery编程的步骤 1

1.3 jQuery对象与DOM对象如何相互转换 1

1.4如何同时使用prototype和jQuery 1

1.5 EL表达式和jQuery函数的区别 2

二、 选择器 3

2.1什么是选择器 3

2.2基本选择器 3

2.3层次选择器 3

2.4基本过滤选择器 4

2.5内容过滤选择器 4

2.6可见性过滤选择器 5

2.7属性过滤选择器 5

2.8子元素过滤选择器 5

2.9表单对象属性过滤选择器 5

2.10表单选择器 6

三、 DOM操作 7

3.1查询 7

3.2创建 7

3.3插入节点 7

3.4删除节点 7

3.5如何将JavaScript代码与HTML分开 8

3.6复制节点 8

3.7属性 8

3.8样式操作 9

3.9遍历节点 9

3.10案例:员工列表(点击某行该行加亮,多选框被选中) 10

3.11案例:员工列表(点击部门隐藏或显示员工) 11

四、 事件 12

4.1事件绑定 12

4.2合成事件 12

4.3事件冒泡 可参考JavaScript笔记7.5 12

4.4 jQuery中事件处理 13

4.5动画 14

4.6类数组的操作 14

4.7案例:滚动广告条 15

五、 jQuery对Ajax编程的支持 17

5.1 load()方法 17

5.2案例:显示机票价格 17

5.3 $.get()方法 17

5.4 $.post()方法 18

5.5案例:修改Ajax笔记中2.6案例:股票的实时行情 18

5.6 $.ajax()方法 18

5.7案例:搜索栏联想效果(服务器返回text) 18

5.8案例:下拉列表(服务器返回xml文本) 20

5.9案例:表单验证 21

5.10 jQuery的自定义方法 23

5.11 $.param()方法 24

5.12案例:自定义方法和$.param()方法使用(学了Struts2再看) 24



一、jQuery基础

1.1 jQuery的特点

1)jQuery是一种框架,对于浏览器的兼容问题,95%不用再去考虑了。

2)jQuery利用选择器(借鉴了CSS选择器的语法)查找要操作的节点(DOM对象),然后将这些节点封装成一个jQuery对象(封装的目的有两个:①是为了兼容不同的浏览器。②也为了简化代码)。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。

3)jQuery特点简单概括就是:选择器 + 调方法。

1.2 jQuery编程的步骤

step1:引入jQuery框架(www.jquery.org下载),min为去掉所有格式的压缩版

  <script language="javascript" src="js/jquery-1.4.1.min.js"></script>

step2:使用选择器查找要操作的节点(该节点会被封装成一个jQuery对象,并返回)

  var $obj=$('#di');//ID选择器,查找的节点ID为d1

step3:调用jQuery对象的方法或者属性

  $obj.css('font-size','60px');//调用jQuery的css()方法

u 注意事项:jQuery是一个大的匿名函数,且内部有很多函数(类似Java中的内部类),它的大部分函数返回对象都是jQuery对象(它自己),所以可以继续“.”,例如:

function f1(){

var $obj=$('#d1');//为了强调返回的是jQuery对象,命名习惯用$开头来声明变量

$obj.css('font-size','60px').css('font-style','italic'); }

1.3 jQuery对象与DOM对象如何相互转换

1)dom对象如何转化为jQuery对象

使用函数:$(dom对象)即可,例如:

  function f2(){

var obj=document.getElementById('d1');

var $obj=$(obj);//将dom节点封装成jQuery对象

$obj.html('hello java'); }

2)jQuery对象如何转化为dom对象

方式一:$obj.get(0); 方式二:$obj.get()[0];

  function f3(){

  var $obj=$('#d1'); //方式一:var obj=$obj.get(0);

var obj=$obj.get()[0];//方式二 obj.innerHTML='hello perl'; }

1.4如何同时使用prototype和jQuery

step1:先导入prototype.js,再导入jQuery.js

step2:将jQuery的$函数换一个名字:var $a=jQuery.noConflict();//注意大小写

u 注意事项:函数名就是一个变量,指向函数对象,例如:

<script language="javascript" src="js/prototype-1.6.0.3.js"></script>

<script language="javascript" src="js/jquery-1.4.3.js"></script>

function f1(){//无效 var obj=$('d1'); }

//无效是因为jQuery是后引入的,所以prototype被jQuery替换

function f1(){//为了避免冲突,可以将jQuery的$函数换一个名字$a

var $a=jQuery.noConflict(); var obj=$('d1');

obj.innerHTML='hello prototype'; $a('#d1').html('hello jQuery'); }

1.5 EL表达式和jQuery函数的区别

1)${}:EL表达式,在服务器端运行(JSTL标签库也在服务器端运行,EL和JSTL标签库本质是Java代码)。

2)$():jQuery函数,在浏览器中运行(JavaScript也在浏览器中运行)。



二、选择器

2.1什么是选择器

jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。

2.2基本选择器

1)#id:ID选择器,如:$('#d1').css('color','red');//编号1变

2).class:类选择器,如:$('.s1').css('font-size','60px');//编号2和3变

3)element:元素选择器,如:$('div').css('font-size','60px');//编号1和2变

4)selector1,selector2...selectorn:选择器合并,如:$('#d1,p').css('font-size','60px');//编号1和3变

5)*:所有选择器,如:$('*').css('font-size','60px');

6)案例:

  <div id="d1">hello jquery</div><!-- 1 -->

  <div class="s1">hello java</div><!-- 2 -->

  <p class="s1">hello perl</p><!-- 3 -->

  <input type="button" value="基本选择器的使用" onclick="f1();"/>

u 注意事项:当jQuery选择器查找到了多个DOM节点,则仍然是封装成“一个”jQuery对象,在调用jQuery对象的属性或者方法时,默认情况下,会作用于底层所有的DOM节点之上。如:$('.s1').css('font-size','60px');则编号2和3都变。

2.3层次选择器

1)select1 select2:所有后代(要符合select2的要求)。

  例如:$('#d1 div').css('font-size','60px');//d2d3d4d5变

2)select1>select2:只考虑子节点(要符合select2的要求),孙子不管~

  例如:$('#d1>div').css('font-size','60px');//d2d3d5变

3)select1+select2:下一个兄弟(要符合select2的要求),儿子不管~

  例如:$('#d3+div').css('font-size','60px');//d5变,d2不管

4)select1~select2:下面所有的兄弟(要符合select2的要求),上面的兄弟不管~兄弟中的儿子也不管~

  例如:$('#d2~div').css('background-color','yellow');//d3d5变

5)案例:

<div id="d1">

   <div id="d2">hello 1</div>

   <div id="d3" style="width:200px;height:200px;background-color:red;">

 <div id="d4" style="width:150px;height:150px;background-color:silver;">hello 2</div>

   </div>

   <div id="d5">hello 3</div>

</div>

<input type="button" value="层次选择器的使用" onclick="f1();" />

2.4基本过滤选择器

1):first:第一行。2):last:最后一行。3):not(selector):把满足要求的选择器排除在外。

4):even:偶数行,下标从0开始。    5):odd:奇数行,下标从0开始。

6):eq(index):等于下标的元素,下标从0开始。

7):gt(index):大于下标的元素,下标从0开始。

8):lt(index):小于下标的元素,下标从0开始。

u 注意事项:过滤器前是没有空格的。是xx:first而不是xx :first。

9)案例:step1:页面表格

<table id="t1" border="1" width="60%" cellpadding="0" cellspacing="0">

<thead><tr><td>姓名</td><td>年龄</td></tr></thead>

<tbody><tr><td>岳飞</td><td>33</td></tr>

   <tr id="tr2"><td>赵构</td><td>32</td></tr>

   <tr><td>韩世忠</td><td>31</td></tr>

   <tr><td>梁红玉</td><td>22</td></tr></tbody></table>

<input type="button" value="点这儿" onclick="f1();" />

step2:jQuery代码

  <script language="javascript" src="../js/jquery-1.4.3.js"></script>

  <!-- 相对路径,../表示向上跳一级 -->

<script language="javascript" type="text/javascript">

function f1(){

$('#t1 tr:first').css('background-color','#cccccc');

$('#t1 tr:last').css('background-color','#cccccc');

$('tbody tr:even').css('background-color','#fff8dc');

$('tbody tr:odd').css('background-color','yellow'); }

function f2(){ $('tbody tr:eq(1)').css('font-style','italic').css('font-size','50px'); }

function f3(){ $('tbody tr:not(#tr2)').css('font-size','50px'); }

function f4(){ $('tbody tr:eq(1) td:eq(1)').css('background-color','red');

  //过滤器前(“:”前)是没有空格的 }

  </script>

2.5内容过滤选择器

1):contains(text):匹配包含给定文本的元素。

2):empty:匹配所有不包含子元素或者文本的空元素。

3):has(selector):匹配含有选择器所匹配的元素的元素。

4):parent:匹配含有子元素或者文本的元素(与empty正好相反)。

5)案例:step1:页面

<div>吃饭了吗?</div><div></div>

<div><p>一会要下课了</p></div><input type="button" value="点这儿" onclick="f1();"/>

step2:jQuery代码

<script language="javascript" src="../js/jquery-1.4.3.js"></script>

<script language="javascript" type="text/javascript">

function f1(){ $('div:contains(吃饭)').css('font-size','50px'); }

function f2(){//当参数比较多,采用对象的方式传递

$('div:empty').css({'width':'400px', 'height':'80px','border':'2px solid red'}); }

function f3(){ $('div:has(p)').css('font-size','80px'); }

function f4(){ $('div:parent').css('border','2px solid blue'); }

</script>

2.6可见性过滤选择器

1):hidden 匹配所有不可见元素,或者type为hidden的元素。

2):visible 匹配所有的可见元素。

3)案例:step1:页面

<div>hell jQuery</div><div style="display:none;">hello java</div>

<input type="button" value="点这儿" onclick="f1();" />

step2:jQuery代码

<script language="javascript" src="../js/jquery-1.4.3.js"></script>

<script language="javascript" type="text/javascript">

function f1(){ $('div:hidden').css('display','block');//或$('div:hidden').show('slow');

$('div:hidden').show(500);//毫秒 }

function f2(){ $('div:visible').hide(800); }

</script>

2.7属性过滤选择器

1)[attribute]:有某个属性的元素。

  例如:$('div[id]').css('font-size','60px');//div中有id属性的元素,编号1变

2)[attribute=value]:某个属性的值与指定的值相同的元素。

  例如:$('div[id=d1]').css('font-size','60px');//编号1变

3)[attribute!=value]:某个属性的值与指定的值不相同的元素。

  例如:$('div[id!=d1]').css('font-size','60px');//编号2变

4)案例:

  <div id="d1">hell jQuery</div><!-- 1 -->   <div>hello java</div><!-- 2 -->

  <input type="button" value="点这儿" onclick="f1();" />

2.8子元素过滤选择器

1):nth-child(index/even/odd):对符合条件的每个节点的子节点作相同操作。

  例如:$('ul li:nth-child(2)').css('font-size','60px');//item2和item22一起变

2)案例:

  <ul> <li>item1</li> <li>item2</li> <li>item3</li></ul>

  <ul> <li>item11</li><li>item22</li><li>item33</li></ul>

  <input type="button" value="点这儿" onclick="f1();" />

u 注意事项:

v 子元素过滤器中index从1开始。

v 基本过滤器中eq的index从0开始,如上例中:$('ul li:eq(1)').css('font-size','60px');则为item2变化。

2.9表单对象属性过滤选择器

1):enabled:没有被禁用。

例如:$('#form1 input:enabled').attr('disabled',true);//设置属性,可见元素为不可见

2):disabled:被禁用。

例如:$('#form1 input:disabled').css('border','1px dotted red');//设置不可见元素的样式

    $('#form1 input:disabled').attr('disabled',false);//设置属性,不可见元素为可见

3):checked:单选框、多选框中被选中的选项。

 例如:alert($('#form2 input:checked').val());//把值输出,类似于value属性

4):selected:下拉列表中被选中的选项。

例如:alert($('#form3 option:selected').val());

5)案例:

<form id="form1"> username:<input name="username" /><br />

               name:<input name="name" disabled="disabled"/><br /></form>

<form id="form2">

爱好:做饭<input type="checkbox" name="interest" value="cooking"/>

钓鱼<input type="checkbox" name="interest" value="fishing" checked="checked"/>

足球<input type="checkbox" name="interest" value="football"/></form>

<form id="form3">

<option value="bj">北京</option>

<option value="cs" selected="selected">长沙</option>

<option value="wh">武汉</option></form>

<input type="button" value="点这儿" onclick="f1();" />

2.10表单选择器

1):input:input元素。 2):text:文本框。 3):pasword:密码框。

4):radio:单选。 5):checkbox:多选。 6):submit:提交按钮。

7):image:图片。 8):reset:重置按钮。 9):button:普通按钮。

10):file:文件。 11):hidden:隐藏域。



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:50890次
    • 积分:989
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:1篇
    • 译文:0篇
    • 评论:5条
    最新评论