JQuery 的了解
Posted 暗夜独狼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 的了解相关的知识，希望对你有一定的参考价值。
jquery的核心理念： The Write Less Do More.(写的少，做的多)，一个轻量级的js库，，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。jQuery就是利用了javascript函数作用域的特性，采用立即调用表达式包裹了自身的方法来解决这个问题。
jquery的核心函数，指一个工厂对象，即jquery()函数，或者别名$() 函数。
jquery 在页面DOM元素加载完成后执行，（不必等待所有元素例如 图片或Flash 全部下载完毕）：
$(document).ready(function(){
});
可以简写成：
$(function(){
});
jquery 也是一个自执行的匿名函数：
(function(window,undefined){ //jquery 的核心定义 })(window);
将window对象作为参数，传入jquery函数，有助于提高jquery的性能，
可以说jquery的选择器完全利用了css的 选择器：jQuery选择器支持CSS 1、CSS 2的全部和CSS 3的部分选择器
简单的样式 选择器： $("div") // $("#id") // $(".class") //
属性选择器：$("id=^\'s\'"); //id以s开头的--- $("input[type=\'text\']") //
$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，
JQuery完善的处理机制：
document.getElementById("tt").style.color = "red"; //当网页中没有id为tt的元素时，就会报错 //避免浏览器报错，所以先进行判断，如果元素很多时，就非常不方便，很冗余 if(document.getElementById("tt")){ document.getElementById("tt").style.color = "red"; }
当用jquery：
$("#tt").css(\'color\',\'red\'); //无需判断是否存在有id为tt的元素,即使不存在，也不会报错
$(\'#tt\')获取的永远是对象，因此当要用jQuery检查某个元素在网页上是否存在时，
if($("#tt")){...} //这个方法是不行的 //而应该根据获取到元素的长度来判断 if ($("#tt").length>0) {...}; //或者转换为DOM对象： if($("#tt")[0]){...}
Jquery 选择器：
基本选择器：
| id | 根据给定元素的id查找匹配一个元素(注意在网页中每一个id只能使用一次) | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 元素数组(或者说集合元素) | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名称匹配元素 | 元素数组(或者说集合元素) | $("p")选取所有的<p>元素 |
| * | 匹配所有的元素 | 元素数组(或者说集合元素) | $("*")选取所有的元素 |
| selector1,selector2,....selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素数组(集合元素) | $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素 |
层次选择器：
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 | 可以使用next()方法来代替$(\'prev + next\')选 | 选择器 | 方法 |
| 等价关系 | $(".one + div"); | $(".one").next("div") |
$(\'prev〜siblings\')选择器与nextAll()方法的等价关系
| 选择器 | 方法 | |
| 等价关系 | $("#prev～div"); | $("#prev").nextAll("div"); |
$("#prev〜div")选择器只能选择“prev”元素后面的同辈<div>元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
过滤选择器：
基本过滤选择器：
$(“div:first”) //选择所有DIV元素中的第一个DIV元素， 返回：单个元素
$(“div:last”) //选择所有DIV元素中的最后一个DIV元素， 返回：单个元素
$(“div:not(.myClass)”) //选择所有的 样式 不包括myClass的DIV元素， 返回：集合元素
$(“input:even”) //选择所有索引是偶数的input元素， 返回：集合元素
$(“input:odd”) //选择所有索引是奇数的input元素， 返回：集合元素
$(“input:eq(index)”) //选择所有索引等于index的input元素， 返回：集合元素
$(“input:gt(index)”) //选择所有索引大于index的input元素， 返回：集合元素
$(“input:lt(index)”) //选择所有索引小于index的input元素， 返回：集合元素
$(“:header”) //选择所有标题元素（h1,h2,h3）， 返回：集合元素
$(“div:animated”) //选择所有正在执行去画的DIV元素， 返回：集合元素
内容过滤选择器：
$("div:contains(\'John\')") 选择所有div中含有John文本的元素 返回：集合元素
$("div:empty") 选择所有的内容为空或者没有子元素的div 返回：集合元素$("div:has(p)") 选择所有含有p标签的div元素 返回：集合元素 $("div:parent") 选择含有子元素的 div 元素， 返回：集合元素可视化过滤选择器：
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素 jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
属性过滤选择器：
$("div[id]") 选择所有含有id属性的div元素
$("input[name=\'newsletter\']") 选择所有的name属性等于\'newsletter\'的input元素 $("input[name!=\'newsletter\']") 选择所有的name属性不等于\'newsletter\'的input元素
$("input[name^=\'news\']") 选择所有的name属性以\'news\'开头的input元素 $("input[name$=\'news\']") 选择所有的name属性以\'news\'结尾的input元素 $("input[name*=\'man\']") 选择所有的name属性包含\'news\'的input元素$("input[id][name$=\'man\']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：
子元素过滤选择器：$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素 $("li:nth-child(2)") //作为第二个子元素的 li 元素
$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素 $("li:first-child") //作为第一个子元素的 li 元素
$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素 $("li:first-child") //作为最后一个子元素的 li 元素
$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素（没有兄弟元素的li元素），返回：集合元素 $("li:first-child") //作为唯一一个子元素的 li 元素（没有兄弟元素的li元素）
表单元素选择器：
$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button$(":text") 选择所有的单行文本框元素 $(":password") 选择所有的密码元素 $(":radio") 选择所有的单选框$(":checkbox") 选择所有的复选框 $(":submit") 选择所有的提交按钮$(":image") 选择所有的image input元素 $(":reset") 选择所有的重置按钮$(":button") 选择所有的按钮 $(":file") 选择所有的文件上传$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 想得到表单中表单元素的个数： $("#form : input").length;(注意与$("#form input")的区别)
Jquery选择器中的注意事项：
1．选择器中含有"．"、"#"、"("或"]"等特殊字符：
2、选择器中空格的问题：
<div class="test"> <div style="display:none">aa</div> <div style="display:none">bb</div> <div style="display:none">cc</div> <div class="test" style="display:none">dd</div> </div> <div class="test" style="display:none">dd</div> <div class="test" style="display:none">dd</div>
$(".test:hidden").length; //无空格3 找class是test 的 不显示 的 元素（隐藏元素） $(".test :hidden").length //空格4 找class是test的子元素中的 不显示的 元素（隐藏元素）
一个简单的例子：
<ul class="catou">
<li><a href="">佳能</a><i>30440</i></li>
<li><a href="">索尼</a><i>27220</i></li>
<li><a href="">三星</a><i>20880</i></li>
<li><a href="">尼康</a><i>17821</i></li>
<li><a href="">松下</a><i>12889</i></li>
<li><a href="">富士</a><i>35678</i></li>
<li><a href="">柯达</a><i>95002</i></li>
<li><a href="">柯达</a><i>85614</i></li>
<li><a href="">柯达1</a><i>95002</i></li>
<li><a href="">柯达2</a><i>23345</i></li>
<li><a href="">柯达3</a><i>55930</i></li>
<li><a href="">柯达4</a><i>74369</i></li>
<li><a href="">其他品牌相机</a><i>95002</i></li>
</ul>
<div class="more">显示全部品牌</div>
$(function(){
var s = $(".catou li:gt(5):not(:last)");
s.hide();
/* $(".more").click(function(){
if(s.is(":visible")){ //如果元素显示，
s.hide();
$(this).text("显示所有");
}else{
s.show();
$(this).text("精简显示");
}
});*/
$(".more").toggle(function(){
s.show();
$(this).text("精简显示");
},function(){
s.hide();
$(this).text("显示所有");
});
});
以上是关于JQuery 的了解的主要内容，如果未能解决你的问题，请参考以下文章