标签:
var $cr = $("#cr"); //jQuery对象 var cr = $cr[0]; //DOM对象
var $cr = $("#cr"); //jQuery对象 var cr = $cr.get(0); //DOM对象
var cr = document.getElementById("cr"); //DOM对象 var $cr = $(cr); //jQuery对象
<!-- 引入prototype库 --> <script type="text/javascript" src="lib/prototype.js"></script> <!-- 引入jQuery库 --> <script type="text/javascript" src="lib/jQuery.js"></script> <script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
(2)想确保jQuery不与其他库冲突,又想自定义快捷方式:
<script type="text/javascript"> var $j = jQuery.noConflict(); //自定义快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式 $j $j("p").click(function(){ alert.($j(this).text()); }); }); $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //函数内部继续使用$() alert.($(this).text()); }); }); $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
<2>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //定义匿名函数 $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ alert.($(this).text()); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素 </script>
if($("#tt")){ /* do something */ }
应根据获取的元素长度来判断:
if($("#tt").length > 0){ /* do something */ }
或转换成DOM对象:
if($("#tt")[0]){ /* do something */ }
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定元素名匹配元素 | 集合元素 | $("p") |
* | 匹配所有元素 | 集合元素 | $("*") |
selector1,selector2... | 将每个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass") |
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取div里所有span元素 |
$("parent>child") | 与CSS的子选择器一样 | 集合元素 | $("div>span") |
$("prev+next") | 与CSS的相邻同胞选择器一样 | 集合元素 | $(".one+div") |
$("prev~sibling") | 与CSS的通用的同胞组合选择器一样 | 集合元素 | $("#two~div") |
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first")选取所有<div>元素中第1个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")解释类似:first |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)") |
:even | 选取索引是偶数的元素,索引从0开始 | 集合元素 | $("input:even") |
:odd | 选取索引是奇数的元素,索引从0开始 | 集合元素 | $("input:odd") |
:eq(index) | 选取索引是index的元素,index从0开始 | 单个元素 | $("input:eq(1)") |
:gt(index) | 选取索引大于index的元素,index从0开始 | 集合元素 | $("input:gt(1)") |
:lt(index) | 选取索引小于index的元素,index从0开始 | 集合元素 | $("input:lt(1)") |
:header | 选取所有标题元素,例h1,h2 | 集合元素 | $(":header") |
:animated | 选取正在执行动画的元素 | 集合元素 | $("div:animated") |
:focus | 选取获得焦点的元素 | 集合元素 | $(":focus") |
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains(‘me‘)")选取所有含有文本"me"的div元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p元素的div元素 |
:parent | 选取含有子元素或文本元素的元素 | 集合元素 | $("div:parent") |
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden")选取所有不可见元素 |
:visible | 选取所有可见元素 | 集合元素 | $("div:visible")选取可见的div元素 |
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选择拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的div元素 |
[attribute=value] | 选择拥有属性值为value的元素 | 集合元素 | $("div[title=test]") |
[attribute!=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[title!=test]"),没有属性title的元素也会被选取 |
[attribute^=value] | 选择属性值以value开始的元素 | 集合元素 | $("div[title^=test]") |
[attribute$=value] | 选择属性值以value结束的元素 | 集合元素 | $("div[title$=test]") |
[attribute*=value] | 选择属性值含有value的元素 | 集合元素 | $("div[title*=test]") |
[attribute|=value] | 选择属性等于给定字符串或以该字符串为前缀(该字符串后 跟一个连字符‘-’)的元素 |
集合元素 | $("div[title|="en"]")选取title属性等于en 或以en为前缀的元素 |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[title~="uk"]") |
[attribute1] [attribute2] ... |
用属性选择器合并成复合选择器,满足多个条件,缩小范围 | 集合元素 | $("div[id][title$="test"]")选取拥有属性 id并且属性title以"test"结束的div元素 |
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even /odd/equatioin) |
选取每个父元素下第index个子元素或奇偶元素, index从1开始 |
集合元素 | 将为每一个父元素匹配子元素 |
:first-child | 选取每个父元素的第一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:only-child | 若某个元素是其父元素唯一的子元素,则被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素 |
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled") |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form1 :disabled") |
:checked | 选取所有被选中元素,单选,复选 | 集合元素 | $("input:checked") |
:selected | 选取所有被选中选项元素,下来列表 | 集合元素 | $("select option:selected") |
:input | 选取所有<input><textarea><select><button> | 集合元素 | $(":input") |
:text | 选取所有单行文本框 | 集合元素 | $(":text") |
:password | 选取所有密码框 | 集合元素 | $(":password") |
:radio | 选取所有单选框 | 集合元素 | $(":radio") |
:checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
:submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
:image | 选取所有图像按钮 | 集合元素 | $(":image") |
:reset | 选取重置按钮 | 集合元素 | $(":reset") |
:button | 选取所有按钮 | 集合元素 | $(":button") |
:file | 选取所有上传域 | 集合元素 | $(":file") |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
方法 | 描述 | 示例 |
append() | 向每个匹配的元素内部追加内容 | <p>我想说:</p> $("p").append("<b>你好</b>"); <p>我想说:<b>你好</b></p> |
appendTo() | 将所有匹配元素追加到指定元素中,与append方法颠倒 | <p>我想说:</p> $("<b>你好</b>").appendTo("p"); <p>我想说:<b>你好</b></p> |
prepend() | 向每个元素内部前置内容 | <p>我想说:</p> $("p").prepend("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
prependTo() | 将所有匹配元素前置到指定元素中,与prependTo方法颠倒 | <p>我想说:</p> $("p").prependTo("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
after() | 在每个匹配元素之后插入内容 | <p>我想说:</p> $("p").after("<b>你好</b>"); <p>我想说:</p><b>你好</b> |
insertAfter() | 将所有匹配元素插入到指定元素之后 | <p>我想说:</p> $("<b>你好</b> ").insertAfter("p"); <p>我想说:</p><b>你好</b> |
before() | 在每个匹配的元素之前插入内容 | <p>我想说:</p> $("p").before("<b>你好</b>"); <b>你好</b> <p>我想说:</p> |
insertBefore() | 将所有匹配元素插入到指定元素之前 | <p>我想说:</p> $("<b>你好</b> ").insertBefore("p"); <b>你好</b> <p>我想说:</p> |
$("ul li:eq(1)").remove();
$("ul li").remove("li[title!=test]");
$("p").replaceWith("<strong>hello</strong>");
$("<strong>hello</strong>").replaceAll("p");
<strong>hello</strong>
$("strong").wrap("<b></b>"); //用b标签把strong元素包裹起来
<b><strong>hello</strong></b>
<strong>hello</strong> <strong>hello</strong>
$("strong").wrap("<b></b>");
<b><strong>hello</strong></b> <b><strong>hello</strong></b>
<b> <strong>hello</strong> <strong>hello</strong> </b>
<strong>hello</strong>
$("strong").wrapInner("<b></b>");
<strong><b>hello</b></strong>
var $p = $("p"); var p_txt = $p.attr("title");
$("p").attr("title","value"); //用于设置单个属性 $("p").attr({"title":"you title","name":"you name"}); //用于设置多个属性,使用对象传递
$("p").removeAttr("title");
$("p").addClass("another");
$toggleBtn.toggle(function(){ //代码1 },function(){ //代码2 });
$("p").toggleClass("another");
$("p").css("color","red"); //设置单个 $("p").css({"color":"red","fontSize":"30px"); //设置多个
$("p").height();
标签:
原文地址:http://www.cnblogs.com/TwinklingZ/p/5342775.html