转载请自觉注明原文:http://www.lhy-seo.com/JavaScript/detail-51.html
jquery写作方式:
01 | //完整的写法 |
02 | jQuery(document).ready( function () { alert( "Hello" ); }); |
03 |
04 | //jQuery 可简写为 $ |
05 | $(document).ready( function () { alert( "Hello" ); }); |
06 |
07 | //$(document) 可以简写为 $() |
08 | $().ready( function () { alert( "Hello" ); }); |
09 |
10 | //$(document).ready() 也可以简写为 $() |
11 | $( function () { alert( "Hello" ); }); |
window.onload与$(function(){})区别:
window.onload() 发生在页面载入完成时,
$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);
特殊字符含义:
$选择器:
在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:
html代码:
1 | <strong><input name= "newsletter" /> |
2 | <input name= "milkman" /> |
3 | <input name= "jobletter" /></strong> |
jQuery 代码:
1 | <strong>$( "input[name$='letter']" )</strong> |
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
!选择器:
[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value])
html代码:
1 | <input type= "checkbox" name= "newsletter" value= "Hot Fuzz" /> |
2 | <input type= "checkbox" name= "newsletter" value= "Cold Fusion" /> |
3 | <input type= "checkbox" name= "accept" value= "Evil Plans" /> |
jQuery 代码:
1 | $( "input[name!='newsletter']" ).attr( "checked" , true ); |
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
*选择器:
[attribute*=value],匹配给定的属性是以包含某些值的元素:
html代码:
1 | <input name= "man-news" /> |
2 | <input name= "milkman" /> |
3 | <input name= "letterman2" /> |
4 | <input name= "newmilk" /> |
jQuery 代码:
1 | $( "input[name*='man']" ) |
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
@选择器:
匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
^选择器:
[attribute^=value],匹配给定的属性是以某些值开始的元素:
html代码:
1 | <input name= "newsletter" /> |
2 | <input name= "milkman" /> |
3 | <input name= "newsboy" /> |
jQuery代码:
1 | $( "input[name^='news']" ) |
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
除了以上列出的5种特殊符号外,还有以下的常用特殊符号:
# 指示 id
. 指示 class
* 全选
, 多选
空格 后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找