Jquery基础
一、 Jquery 头标题位置
第一行 <script src=”jquery.js” type=”text/javascript”></script>
第二行自定义标签 <script src=”alice.js” type=”text/javascript”></script>
二、 < !-- [endif]-->Jquery 选择符
1. 工厂函数
$( )
标签名： $(‘p’) 会取得文档中所有的段落
ID ： $(‘#some-id’) 会取得文档中具有对应的 some-id ID 的一个元素。
类： $(‘.some-class’) 会取得文档中带有 some-class 类的所有元素。
2. 层次选择符
$(‘from input’)
$(‘#selected-plays>li’).addClass(‘horizontal’); 其中 > 表示子元素的顶项
$("ul li:nth-child(2)") 在每个 ul 中查找查找第 2 个 li
$("ul li:first-child") 在每个 ul 中查找第一个 li
$("ul li:last-child") 在每个 ul 中查找最后一个 li
3. XPath 选择符
$(‘a[@title]’) 选择带有 title 属性的 a 标签 @ 表示指向属性
$(‘div[ol]’) 选择 div 里的 ol 标签
$(‘a[@href^=”mailto:”]’) 选择属性以 mailto 开头的元素，关键字符 ^
$(‘a[@href$=”.pdf”]’) 选择属性以 .pdf 结尾的元素，关键字符 $
$(‘a[@href*=”mysite.com”]’) 选择任意含有才值的元素，关键字符 *
4. 自定义选择符
$("tr:first") 选择第一行 tr
$(‘tr:last’) 选择最后一行 tr
$(‘div.horizontal:eq(1)’) 选择此类中第 2 个元素，关键字符 eq()
$(‘div form[1]’) 选择 div 中是 form 的第二个 form 元素
$(‘tr:odd’) 选择所有 tr 的奇数元素 关键字符 odd
$(‘tr:even’) 选择所有 tr 的偶数元素 关键字符 even
$("tr:gt(0)") 选择大于 tr 第一行的 tr
$("tr:lt(2)") 选择小于 tr 第三行的 tr
$(":header").css("background", "#EEE") 为 h1,h2,h3 加背景色
$("td:empty") 选择不含有子元素或不含有文本的元素
$("td:parent") 选择含有子元素或是有文本的元素
$(‘td:contains(“Henry”)’) 选择 td 内包换 Henry 的所有元素。
$(‘#selected-plays li:not(.horizontal)’).addClass(‘sub-level’);
5. 表单选择符
$(‘:input’)
$(‘:text’)
$(‘:password’)
$(‘:radio’)
$(‘:checkbox’)
$(‘:submit’)
$(‘:reset’)
$(‘:button’)
$(‘:file’)
$(‘:hidden’)
$(‘input:disabled’) 查询所有不可有的 input 元素
$(‘input:checked’) 查询所有选中的复选框
$("select option:selected") 查询所有选中的选项元素
三、 事件
1. 在页面加载后执行事件
$().ready(function(){ });
2. 为元素添加事件
$(‘body’).bind(‘click’,function(){
// 编写事件触发时执行。。。
// 这里为元素添加类为 addClass(‘’);
// 移除类为 removeClass(‘’); 当括号内为空时移除所有类
});
简写事件
.bind(‘click’,function(){}); 可以写成 .click(function{});
3. 复合事件
.toggle(function{
},function{
}); 将完成对指定元素两次才做而执行的两个函数
.hover(function{
},function{
}); 当鼠标滑入滑指定元素的时候执行的两个函数
.taggle() 对于添加，删除类更优雅的做法
.toggleClass(‘hidden’);
4. 限制和终止事件
This 与 event.target
This 指代的是事件说定义元素
Event.target 是实际被出发的元素 如单击的
a) 必要的判断来组织时间的捕获和冒泡
If(event.target==this)
b) 停止事件传播
event.stopPropagation(); 来中止时间的传播
c) 中止默认事件如 submit 锚元素
.preventDefault()
d) 中止事件
.unbind(‘click’,toggleStyleSwitcher); 移除 click 对应的事件
四、 效果
1. 修改内联 CSS
.css(‘ 属性 ’) 可以得到该属性的值
.css(‘ 属性 ’,’ 值 ’) 可以设置对应属性的值
Var num=parseFloat(‘ 字符串 ’ ， 10) 返回数字字符串转化为 10 进制数值常用于设置 css 的属性值
.slice(-2) 返回字符串的后两个字符
.height() 返回指定元素的高度
.height(val) 设置元素的高度
.width() 返回元素的宽度
.width(val) 设置元素的宽度
2. 基本隐藏和显示 .hide() .show() 不带任何参数
对指定元素进行隐藏或显示
3. 效果和速度
默认速度分为： slow 、 normal 、 fast
显示效果速度
.show(slow) 显示速度为慢
.hide(fast) 隐藏效果为快
淡入淡出效果
.fadeIn(slow) 为指定元素增加淡入效果
.fadeOut(slow) 为指定元素增加弹出效果
不透明度效果
fadeTO()
滑入滑出视图
.slideUp(‘slow’) 滑出视图
.slideDown(‘slow’) 滑入视图
4. 多重效果
.animate({parma1:’value1’,param2:’value2’},speed,function(){
})
5. 并发与排队效果
对于同一个元素的多种效果的排队为
$().animate()
.animate()
…
对于不同元素的效果排队为使用回调函数
$(). animate({parma1:’value1’,param2:’value2’},speed,function(){
$().animate()
})
五、 基于命令改变页面
1. 操作属性
.attr({‘rel’:’external’}) 为指定元素添加 rel 属性值为 external
.removeAttr() 为指定元素删除属性
2. 遍历方法
.each() 遍历可以遍历 class 中的每个元组并给他们分配方法
3. 通过工厂函数创建元素
$(‘<a href=”#top”>back to top</a>’) 创建 a 标签
$(‘<a id=”top”></a>’) 创建标签并用来指定上个标签中 href 的锚点
4. 插入新元素
在相邻元素位置上插入
$(‘ 创建标签 ’).insertBefore(‘div.chaper p’) 将创建标签插入
$(‘ 插入目标 ’).before(‘ 创建新标签 ’) 将创建标签插入
.insertAfter() 和 .after() 与上相仿
在元素内插入
.append()
.appendto()
.prepend()
.prependto()
5. 移动元素
$(‘span.footnote’).insertBefore(‘#footer’) 将元素 span.footnote 移动到 #footer 之前
6. 包装元素
.warp('<li id=”foot-note-”></li>’) 将指定元素包装上 li 标签
7. 复制元素
$(‘’).clone() 克隆指定元素
$(‘’).clone(false) 克隆标签而不克隆内容
8. 移除元素
$(‘’).remove() 移除指定元素
六、 AJAX
用 AJAX 加载数据
1. 追加 HTML
$(‘#dictionary’).load(‘a.html’); 将 .load() 中内容加载到 dictionary 中
这里 a.html 不是一个完整的 HTML 格式文本而是类似 XML 的 HTML 格式
2. 操作 javascript 对象
略
3. 追加脚本（在脚本中写入 script 对象）
略
4. 加载 XML 文档
a) XML 文档格式 见电子书
b) $.get(‘d.xml’,function(data){
//data 是返回的 XML 数据这里要对 data 进行遍历操作
})
用 AJAX 访问服务器
5. 执行 get 请求
$.get(‘e.php’,{‘term’:$(this),text()},function(data){
$.(‘#dictionary’).html(data);
})
return false; // 当用 a 标签请求时将不使用 a 标签的同步请求。
其中， e.php 是要加载的格式；｛｝里的内容是向服务器发送的参数
最后将数据插入 dictionary
6. 执行 post 请求
$.post(‘e.php’,{‘term’:$(this).text()},function(data){
$(‘#dictionary’).html(data);
})
return false; // 不使用 a 标签进行同步请求
.load 方法与 post 相同，上述代码可写为
$(‘#dictionary’).load(‘e.php’,{‘term’:$(this).text()});
return false;
7. 序列化表单
$(‘#dictionary’).load(‘f.php’,{‘term’:$(‘input[@name=”term”]’)})
8. 关注请求
当 AJAX 请求开始尚未进行其他传输时，触发 .ajaxStart()
当最有一次活动请求中止时，触发 .ajaxStop()
$(‘#loading’).ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
七、 Jquery 核心函数
1. size() 方法 length() 方法
$(‘’).size(); 返回指定元素的数量返回值为 number 类型。
2. get() 方法与 reverse() 方法
$(‘td’).get().reverse(); 返回 td 元素的类型数组，并让数组反向
$(‘’).get(0); 选择指定元素中的第 1 个元素
3. index() 方法
$(‘*’).index($(‘td’)[0]); 查找 td 的第一个元素返回他所在 document 中的节点数
4. jquery 的扩展自定义方法
定义单选框是否被点击
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
定义最大值最小值
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
5. 文本操作
$(‘’).text() 得到元素的文本内容
$(‘’).text(val) 设置文本的内容
6. select 与 input 值操作
$(‘’).val() 返回一个 select 或 input 的内容
$(‘’).val(“”) 设置 select 或 input 的内容
7. 筛选方法 ( 纯 BOM)
.eq( 数字 ) 选择找出界面元素数组中的第‘数字 +1’ 位元素
$(this).hasClass("protected") 返回指定元素中是否含有 protected 类
xxx.is(‘b’) 判断 xxx 是否为 a 是返回 true
数组 .map(function(){return $(this).xxx}) 返回每一个元素的 xxx 的数组
$(‘’).not(‘:contains(“Henry”)’) 删除选择指定元素中不包含 Henry 的元素
.find(‘’) 搜索指定的元素
$(‘’).children(‘td’) 选择元素的所有第一代子元素中为 td 的元素
.contents() 选择指定元素的所有子节点，注意是节点不是子元素
$(‘’).find(‘td:gt(0)’) 选择指定元素中所有编号大于 1 的单元格
$(‘’).next() 选择指定元素同辈的下一个元素
$(‘’).prev() 选择指定元素同辈的前一个元素
$(‘’).Parent() 选择元素的父亲节点 , 此父亲节点为最近的一个父亲