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() 选择元素的父亲节点 , 此父亲节点为最近的一个父亲