jquery基础

最新推荐文章于 2022-11-15 10:08:40 发布

龙泉太阿

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量1k

点赞数

分类专栏： javascript/jquery 文章标签： jquery

本文链接：https://blog.csdn.net/menergy/article/details/11360585

版权

javascript/jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第0章：在线资源

官网：http://jquery.com/

w3c JQuery：http://www.w3school.com.cn/jquery/index.asp

Wiki：http://learn.jquery.com/

官网API：http://api.jquery.com/

中文版官网API：http://www.mjplay.com.cn/jquery/

第三方API：http://remysharp.com/jquery-api/

有用的博客：

Learning JQuery：http://www.learningjquery.com/

第1章：选择器

1.参考手册

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
a,b	$("a ,b")	所有与a或b匹配的元素
a b	$("a b")	所有与a后代的b匹配的元素
a > b	$("a > b")	所有作为a的子元素b匹配的元素，（只不支持IE6）
a + b	$("a + b")	所有与a元素紧邻的同辈b元素匹配的元素
a ~ b	$("a ~ b")	所有与a元素同辈b元素匹配的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(index)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(index)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated	`$( "div:animated" )`	动画正在播放的元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='#']")	所有 href 属性的值包含以 "#" 结尾的元素
[attribute\|='value']	$("[href\|='#]")	所有 href 属性的值以 "#" 开始的元素
[attribute*='value']	$("[href*='#]")	所有 href 属性的值包含 "#" 的元素
[attribute~='value']	$("[href~='#]")	所有 href 属性的值包含 "#"单词的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素，及<button>元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

:nth-child(index)	$(":nth-child(1)")	其父元素第index个子元素（从1开始计数）
:nth-child(even)	$(":nth-child(even)")	其父元素第偶数个子元素（从1开始计数）
:nth-child(odd)	$(":nth-child(odd)")	其父元素第奇数个子元素（从1开始计数）
:nth-child(formula)	$(":nth-child(5)")	其父元素第n个子元素（从1开始计数），format格式为an+b,a、b为整数
:nth-last-child(index/even/odd/formula)	类似上面	类似上面，这里是倒数
:nth-last-of-type(index/even/odd/equation)	类似上面	类似上面，这里是倒数，而且是匹配同胞元素中

:first-child	$(":first-child")	其父元素第一个子元素匹配
:last-child	$(":last-child")	其父元素最后一个子元素匹配
:only-child	$(":only-child")	其父元素唯一一个子元素匹配
:first-of-type	$(":first-of-type")	其匹配的同胞元素中第一个元素
:last-of-type	$(":last-of-type")	其匹配的同胞元素中最后一个元素
:only-of-type	$(":last-of-type")	其匹配的同胞为唯一一个元素

:focus	$(":focus")	获得焦点的元素
:root"	$(":root")	匹配文档doucment的根节点
:lang(language)	$(":lang(en-us)")	`所有包含lang属性指定值的元素，如<div lang="en">` `和<div lang="en-us">`

2.杂碎

1.JQuery的工厂函数$()用于在页面中查找要操作的元素；

2.JQuery支持CSS规范1到规范3中的几乎所有选择符；

第2章：事件

1.参考手册

.bind()

说明：向匹配元素附加一个或更多事件处理器

语法1：.bind( eventType [, eventData ], handler(eventObject) )

语法2：.bind( events )

例子1：

 
 
  
  
   
   $( "#foo" ).bind( "mouseenter mouseleave", function() {
  
  
 
 
 
 
  
  
   
     $( this ).toggleClass( "entered" );
  
  
 
 
 
 
  
  
   
   });

例子2：

 
 
  
  
   
   $( "#bar" ).bind( "click", {
  
  
 
 
 
 
  
  
   
     msg: message
  
  
 
 
 
 
  
  
   
   }, function( event ) {
  
  
 
 
 
 
  
  
   
     alert( event.data.msg );
  
  
 
 
 
 
  
  
   
   });

例子3：

 
 
  
  
   
   $( "#foo" ).bind({
  
  
 
 
 
 
  
  
   
     click: function() {
  
  
 
 
 
 
  
  
   
       // Do something on click
  
  
 
 
 
 
  
  
   
     },
  
  
 
 
 
 
  
  
   
     mouseenter: function() {
  
  
 
 
 
 
  
  
   
       // Do something on mouseenter
  
  
 
 
 
 
  
  
   
     }
  
  
 
 
 
 
  
  
   
   });

.blur()

说明：触发、或将函数绑定到指定元素的 blur 事件

语法1：.blur( [eventData ], handler(eventObject) )

语法2：.blur()

例子1：

 
 
  
  
   
   $( "#target" ).blur(function() {
  
  
 
 
 
 
  
  
   
     alert( "Handler for .blur() called." );
  
  
 
 
 
 
  
  
   
   });

例子2：

$( "p" ).blur();

.change()

说明：触发、或将函数绑定到指定元素的 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

语法1：.change( [eventData ], handler(eventObject) )

语法2：.change()

例子1：

 
 
  
  
   
   $( "input[type='text']" ).change(function() {
  
  
 
 
 
 
  
  
   
     // Check input( $( this ).val() ) for validity here
  
  
 
 
 
 
  
  
   
   });

例子2：

$( ".target" ).change();

.click()

说明：触发、或将函数绑定到指定元素的 click 事件

语法1：.click( [eventData ], handler(eventObject) )

语法2：.click()

例子1：

 
 
  
  
   
   $( "#target" ).click(function() {
  
  
 
 
 
 
  
  
   
     alert( "Handler for .click() called." );
  
  
 
 
 
 
  
  
   
   });

例子2：

 
 
  
  
   
   $( "#other" ).click(function() {
  
  
 
 
 
 
  
  
   
     $( "#target" ).click();
  
  
 
 
 
 
  
  
   
   });

.dblclick()

说明：触发、或将函数绑定到指定元素的 double click 事件

语法1：.dblclick( [eventData ], handler(eventObject) )

语法2：.dblclick()

例子1：

 
 
  
  
   
   $( "#target" ).dblclick(function() {
  
  
 
 
 
 
  
  
   
     alert( "Handler for .dblclick() called." );
  
  
 
 
 
 
  
  
   
   });

例子2：

 
 
  
  
   
   $( "#other" ).click(function() {
  
  
 
 
 
 
  
  
   
     $( "#target" ).dblclick();
  
  
 
 
 
 
  
  
   
   });

.delegate()

说明：向匹配元素的当前或未来的子元素附加一个或多个事件处理器

语法1：.delegate( selector, eventType, [eventData], handler(eventObject) )

语法2：.delegate( selector, events )

例子1：

 
 
  
  
   
   // jQuery 1.4.3+
  
  
 
 
 
 
  
  
   
   $( elements ).delegate( selector, events, data, handler );
  
  
 
 
 
 
  
  
   
   // jQuery 1.7+
  
  
 
 
 
 
  
  
   
   $( elements ).on( events, selector, data, handler );

例子2：

 
 
  
  
   
   $( "body" ).delegate( "a", "click", function( event ) {
  
  
 
 
 
 
  
  
   
     event.preventDefault();
  
  
 
 
 
 
  
  
   
   });

例子3：

 
 
  
  
   
   $( "table" ).on( "click", "td", function() {
  
  
 
 
 
 
  
  
   
     $( this ).toggleClass( "chosen" );
  
  
 
 
 
 
  
  
   
   });

例子4：

 
 
  
  
   
   $( "body" ).delegate( "a", {

   
       
    
     
     
      
        click: function() {
     
     
    
    
    
    
     
     
      
          // Do something on click
     
     
    
    
    
    
     
     
      
        },
     
     
    
    
    
    
     
     
      
        mouseenter: function() {
     
     
    
    
    
    
     
     
      
          // Do something on mouseenter
     
     
    
    
    
    
     
     
      
        }
     
     
    
    });

.die()

说明：移除所有通过 live() 函数添加的事件处理程序。

语法1：.die( eventType [, handler ] )

语法2：.die( events )

语法3：.die()

例子1：

$( "p" ).die();

例子2：

$( "p" ).die( "click" );

例子3：

 
 
  
  
   
   var foo = function() {
  
  
 
 
 
 
  
  
   
     // Code to handle some kind of event
  
  
 
 
 
 
  
  
   
   }; 
  
  
 
 
 
 
  
  
   
   // Now foo will be called when paragraphs are clicked
  
  
 
 
 
 
  
  
   
   $( "p" ).live( "click", foo );
  
  
 
 
 
 
  
  
   
   // Now foo will no longer be called
  
  
 
 
 
 
  
  
   
   $( "p" ).die( "click", foo );

.error()

说明：触发、或将函数绑定到指定元素的 error 事件。当元素遇到错误（没有正确载入）时，发生 error 事件。该方法是 bind('error', handler) 的简写方式

语法1：.error( [eventData ], handler(eventObject) )

例子1：

 
 
  
  
   
   $("img")
  
  
 
 
 
 
  
  
   
     .error(function(){
  
  
 
 
 
 
  
  
   
       $(this).hide();
  
  
 
 
 
 
  
  
   
     })
  
  
 
 
 
 
  
  
   
     .attr("src", "missing.png");

event.currentTarget

说明：当前的DOM元素在事件冒泡阶段

例子1：

 
 
  
  
   
   $("p").click(function(event) {
  
  
 
 
 
 
  
  
   
     alert( event.currentTarget === this ); // true
  
  
 
 
 
 
  
  
   
   });

event.isDefaultPrevented()

说明：返回 event 对象上是否调用了 event.preventDefault()。

例子1：

 
 
  
  
   
   $("a").click(function(event){
  
  
 
 
 
 
  
  
   
     alert( event.isDefaultPrevented() ); // false
  
  
 
 
 
 
  
  
   
     event.preventDefault();
  
  
 
 
 
 
  
  
   
     alert( event.isDefaultPrevented() ); // true
  
  
 
 
 
 
  
  
   
   });

event.data

说明：

龙泉太阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础

第0章：在线资源官网：http://jquery.com/Wiki：http://learn.jquery.com/API：http://remysharp.com/jquery-api/有用的博客：Learning JQuery：http://www.learningjquery.com/
复制链接

扫一扫