jQuery_ajax培训教程1

[attribute$=value] 选取属性值以value结束 元素集 $('a[href^="mailto:"]').addClass('mailto'); 的所有元素 合 [attribute*=value]
获取不包含class=ho的 <li>元素 $('a[href$=".xsl"]')：获取所有包含href属性，且属性
window.onload()
网页中所有的内容都加载完毕后触发，包括 元素关联的内容（如链接的图片和资源）都 必须下载完毕后触发 同时编写多个，但只能执行最后一个 无
执行个数 简化写法

jQuery对象

jQuery对象和DOM对象之间的转换
1.3 选择器

CSS选择器
选择器 说明
根据id选择元素 根据类名选择元素 根据标记名选择元素 选择所有元素 将每一个选择器匹配的元 素合并后一起返回
$('td:contains("gmail")').addClass('highlight'); //高亮显示email中有gmail的文本 //为表格行绑定事件,使用jQuery的链式语法连续绑定两个事件到同一个对象 素
获取所有不可用的元素 $('.emp tr').mouseover(function() {
[attribute^=value] 选取属性值以value开头
获取id=menu的元素内的所 有<li>子元素 $(‘li[title!=test2]’)：获取所有包含title属性且属性
值不等于test2的<li>元素
$('#menu li:not(.ho)').addClass('sub'); 合 的所有元素
返回值
元素 元素集合 元素集合 元素集合 元素集合
示例
$(‘#div1’)：选取id=”div1”的元素 $(‘.first’)：选取所有class=”first” 的元素 $(‘input’)：选择所有的<input>元素 $(‘*’)：选择所有的元素 $(‘input,#div2’)：选择所有的 <input>元素和id=”div2”的元素
本章内容

jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
本章目标

能够使用jQuery选择器获得操作对象 能够使用jQuery操作DOM 能够使用jQuery处理页面事件 能够使用jQuery动画方法创建简单动画
1. jQuery选择器
值以.xsl结尾的<a>元素
$('a[href^="mailto:"]')：获取所有包含href属性，且属 性值以mailto:开头的<a>元素
$('a[href$=".xsl"]').addClass('xsllink');
选取属性值中包含value 的所有元素
$('a[href*=""]').addClass('site'); }); [selector1][selector2]…[s
1.1 jQuery简介

jQuery是一个轻量的JavaScript库，是由John Resig在2006年1月创建的一个 开源项目 jQuery常规作用可以概括为以下7个方面：

获取页面中的元素 修改页面外观 改变页面内容 响应用户在页面上的操作 为页面添加动态效果 页面无刷新获取服务器端信息 简化常规的JavaScript代码
1.2 编写第一个jQuery应用

配置jQuery环境

在页面中添加对于jQuery库文件的引用
编写jQuery代码
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { alert("Hello World!"); }); </script>
获取每个父元素的第一个子元素 $('.emp tr:even').addClass('even'); 获取每个父元素的最后一个子元素 获取所有可用的元素
$('.emp tr:even')：获取所有带emp类的表格的偶数行 选择顺序为偶数的元素 元素集合 $('.emp tr:odd').addClass('odd'); //添加交替行背景色 元素集合 元素集合 元素集合 元素集合 $(‘ul li:first-child’)：获取每个<ul>元素的第1个<li>元素 $(‘ul li:last-child’)：获取每个<ul>元素的最后一个<li>元素 $(‘#form1:enabled’)：获取id=”form1”的表单内的所有可用元 $(‘#form1:disabled’)：获取id=”form1”的表单内的所有不可 用元素 $(‘input:checked’)：获取所有被选中的<input>元素 $(‘select:selected’)：获取所有被选中的选项元素 $(‘#form1:input’)：获取id=”form1”表单内的所有<input>、 <textarea>、<select>和<button>元素 $(‘:text’)：获取所有的单行文本框 $(‘:password)：获取所有的密码框 $(‘:radio)：获取所有的单选框 $(‘:checkbox)：获取所有的多选框 $(‘:image)：获取所有的图像按钮
1.3 选择器

XPath选择器

通过属性来选择元素
选择器 说明
获取拥有该属性的所有元 素
返回 值
元素集 合
示例
$('li[title]'):获取所有包含title属性的<li>元素 $(‘li[title=test2]’)：获取所有包含title属性且属性值 等于test2的<li>元素
[attribute] [attribute=value] $(function() {
electorN] 合并多个选择器，满足多 个条件，每选择一次，缩 小一次范围 元素集 合
元素集 合
$('a[href*=""]')：获取所有包含href 属性，且属性值中包含的<a>元素 $(‘li[id][title^=test]’)选取所有拥有属性id，且属性 title以test开头的<li>元素
$(this).addClass('alt');
获取所有被选中的元素（单选框、复选框） 元素集合 元素集合 元素集合 元素集合 元素集合 元素集合 元素集合 元素集合
}).mouseout(function() { 获取所有被选中的元素（下拉框）
$(this).removeClass('alt'); 选择所有的<input>、<textarea>、 });
1.3 选择器

自定义选择器

类似CSS中的伪类选择符语法，使用冒号(:)开头
说明 获取集合中第index+1个元素 选择每个父元素下的第index个子元素 返回值 元素集合 元素集合 元素集合 示例 $(‘div.ho:eq(1)’)：获取所有带有ho类的<div>元素集合中第2个 <div>元素 $(‘div:nth-child(1)’)：获取所有<div>元素的第1个子元素 $('.emp tr:odd')：获取所有带emp类的表格的奇数行
获取某属性值为value的 元素集 所有元素 合 $(‘元素名[XPath属性选择表达式]’) 元素集 合 元素集
$('li[title]').addClass('bg'); [attribute!=value] 获取某属性值不等于 value的所有元素
$('#menu > li').addClass('ho');
选择器 :eq(index) :nth-child(index) :odd :even :first-child :last-child :enabled :disabled :checked :selected :input
$(document).ready(function() { 选择顺序为奇数的元素
ቤተ መጻሕፍቲ ባይዱ
$(':radio').click(function() { var $val = $(this).val(); if ($val == "男") { text() 获取或设置元素的文本 var $txt=$(‘p’).text()：获取<p>元素的文本 //使用html()添加内容 $(‘p’).text(‘你喜欢jQuery吗？’)：设置<p>元素的 var $taste = '<input type="checkbox" name="male" value="sports">体育</input>'; ...... 文本 $('#div2').html($taste); attr() 获取或设置元素属性 $(‘li’).attr(‘title’)：获取<li>元素的title属性值 //选中前2项 $(‘li’).attr(‘title’,’test’)：设置<li>元素的title属性 $(':checkbox:eq(0)').attr('checked', true); $(':checkbox:eq(1)').attr('checked', true); 值为test } val() 获取或设置元素的值 $(‘#email’).val()：获取id=email的元素的value else { $(‘#email’).val(‘请输入Email’)：设置id=email的元 ...... 素的value $(':checkbox').val(["dance", "shopping"]); } $() 动态创建HTML内容 var $html=$(‘<p>动态创建段落</p>’)：动态创建<p> }); 元素 });