前言
终于像挤牙膏一样开始了在博客园的第一篇随记，一直想写博，又都没时间（其实都是忽悠自已）。经历了一个电商平台的开发，真心很疲惫，想休息下，但我不敢。今天若休息，明天呢，最终会发现一直是在自已忽悠自己。以前经常看别人的博客，某些写的真的很好，是书本上根本看不到的，现在我也要用博客来记录下我的所学所悟。以下是使用jQuery的一个小总结，为一些常用选择器和方法。
jQuery选择器
1.id选择器：$("#elementid")，选择id为elementid的元素集，注意当使用服务.NET的服务器控件时，由于使用母板或元素嵌套等因素解析到客户端的元素id可能会有变化
2.class选择器：$(".elementclass")，选择class含elementclass的元素集，元素是可以指定多个样式的，如
3.子选择器：$("pselector>cselector")，选择pselector的cselector子元素
4.后代选择器：$("aselector dselector")，选择aselector的dselector后代元素集，注意子选择器与后代选择器的区别
5.基本过滤选择器：$("selector:first")、$("selector:last")，选择selector中的第一个/最后一个元素，如$("ul li:first")选择ul下的第一个li元素
6. $("selector:eq(index)")，选择selector中的第index+1个元素，如$("ul li:eq(1)")选择ul下的第二个li元素
7. $("selector:not(selector2)")，选择selector中不符合selector2的元素集，如$("ul li:not(.highlight)")选择ul下的不含样式highlight的li元素集
8. $("selector:even")、$("selector:odd")，选择selector中index为偶/奇的元素集，如$("ul li:even")选择ul下的偶index的li元素集，即从第一条，then隔条取
9.属性过滤选择器：$("selector[typename=typevalue]")，选择selector中typename属性的值为typevalue的元素集，如选择单选按钮$("input[type=radio]")
10. ：$("selector[typename]")，选择selector中含typename属性的元素集，如选择选中的单选按钮$("input[type=radio][checked]")
11.表单对象属性过滤选择器：$("input:checked")，获取选中的元素，相当于$("input[checked]")
12 $("select :selected")，获取下拉框下的选中项，如$("select :selected").length获取下拉框选项的个数，相当于$("select input[selected]")
13.表单选择器：$("selector :elementtype")，提取selector下elementtype类型的元素，如$("#form1 :checkbox")选取form表单中的复选框，相当于$("#form1 input[type=checkbox")
说明：1.以上均为个人开发中一些实际常用到的选择器
2.选择的结果均为集合，表现为有length属性
3.属性过滤与表单对象属性过滤：从字面就可以理解后者只是前者的一个子功能，即前者可以实现后者
4.表单对象属性过滤与表单选择器的区别：前者是对元素的attr的过滤，后者是对元素的type的过滤
jQuery方法
1.事件方法：click()、focus()、hover()、ready()，为元素绑定事件处理器
2.unbind()：为元素移除事件处理器，如在为文本框赋值并触发焦点时，焦点会文本的前面，解决办法：绑定元素focus事件的内容为为文本框赋值，触发focus事件，unbind focus事件
3.toggle()：指定两个或多个处理器，click时轮流执行
4.trigger()：触发事件，$ele.trigger("click")与$ele.click()的确没区别，但如果要给事件传参呢，答案是只能用trigger。如$ele.click(function(event,arg1,arg2){})，可以这样触发$.ele.trigger("click",["zhagnsan","male"])
5.sildeDown()、slideUp()、slideToggle()：展开、收起、切换
6.children()与find()：前者为其子元素，而后者为其所有后代元素
7.parent()与parents()：前者为其父，后者为其祖先
8.prev()、prevAll()、next()、nextAll()与siblings()：前一，前所有、后一、后所有与兄弟元素。均位于同层
9.hasClass()、addClass()、removeClass()：对元素的样式进行判断、添加、移除
10.val()、text()、html()、css()、attr()：传一个参数为取值，两个参数为赋值
11.show()、hide()：显示或隐藏元素
12.has()、is()：前者筛选出含有匹配该选择器的后代元素的元素，后者筛选出匹配该选择器的元素。如$("div").has(":hidden")筛选出含有不可见div元素的元素，而$("div").is(":hidden")筛选出不可见的div元素
13. append() ：附加元素，作为其最后一个子元素，如$("#div1").append($("<span >你好啊<span>"));
14.$element.offset().top、$element.offset().left：元素左上脚相对于document的top、left
15.animate()：动画，如$(".div1").animate({width:"100px",height:"100px"},2000)，在2秒内使.div的width、height同时完成渐变为100px
16.js中的一些字符串操作：str.substring(num1,num2)，选取索引为小num到序号为大num的子串；$.trim()，$.trim()相当于C#的trim()，注意没有str.trim()这种用法；str.match(reg)，使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回；str.split(sep)，返回str用sep分隔后的数组；$.inArray(str,strArray)，返回str在strArray中的索引
17.each()：遍历，两种用法：array.each(function(index,element){})，或$.each(array,function(index,element){})，return false可跳出each
本文链接
<head> <link rel="stylesheet" type="text/css" href=/blog_article/"mystyle.css" /> </head>
body{background: url(/blog_article/images/donkey.jpg) repeat-x fixed center right;}
p.ex2
{
border:red solid thin;
outline:#00ff00 dotted thick;
font:italic bold sans-serif;
}
p.ex1{border: medium double rgb(250,0,255)}
p.small{line-height: 0.4}
p.big{line-height: 2}
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:220px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
background-color:red;
}
img{position:absolute;clip:rect(0px 50px 200px 0px)}
#adiv
{
background-color:#00FFFF;
float:right;
margin:0 0 15px 20px;
padding:15px;
width:150px;
height:150px;
overflow: scroll
}<form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button"> </form> <p class="big">bigbigbig</p> <p class="big">bigbigbig</p> <p class="big">bigbigbig</p> <p class="small">smallsmallsmall</p> <p class="small">smallsmallsmall</p> <p class="small">smallsmallsmall</p> <p class="small">smallsmallsmall</p><br /> <p class="ex1">aaaaaaaaaaaaaaaaaaaa</p><br /> <p class="ex1">aaaaaaaaaaaaaaaaaaaa</p> <p class="ex2">aaaaaaaaaaaaaaaaaaaa</p> <img src=/blog_article/"images/ba8.jpg alt="" /><br /> <div id="adiv"> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 </div>
我们时常在使用png图片的时候，在ie6下发生背景不透明的问题，下面给大家介绍下一个js解决的方式。
首先我们要用到一个js，代码如下：
2 * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
3 * Author: Drew Diller
4 * Email: drew.diller@gmail.com
5 * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
6 * Version: 0.0.8a
7 * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
8 *
9 * Example usage:
10 * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
11 * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
12 **/
13
14 /*
15 PLEASE READ:
16 Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code!
17 */
18
19 /** rewrite by waitingbar 2012.1.12
20 为了解决IE6下透明的png图片缩小时不能完全显示问题
21 el.vml.image.fill.type = 'tile'; 改为：
22 el.vml.image.fill.type = 'frame';
23 */
24
25
26 var DD_belatedPNG = {
27 ns: 'DD_belatedPNG',
28 imgSize: {},
29 delay: 10,
30 nodesFixed: 0,
31 createVmlNameSpace: function () { /* enable VML */
32 if (document.namespaces && !document.namespaces[this.ns]) {
33 document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');
34 }
35 },
36 createVmlStyleSheet: function () { /* style VML, enable behaviors */
37 /*
38 Just in case lots of other developers have added
39 lots of other stylesheets using document.createStyleSheet
40 and hit the 31-limit mark, let's not use that method!
41 further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
42 */
43 var screenStyleSheet, printStyleSheet;
44 screenStyleSheet = document.createElement('style');
45 screenStyleSheet.setAttribute('media', 'screen');
46 document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild);
47 if (screenStyleSheet.styleSheet) {
48 screenStyleSheet = screenStyleSheet.styleSheet;
49 screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');
50 screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;');
51 screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
52 this.screenStyleSheet = screenStyleSheet;
53
54 /* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */
55 /* Thanks to R閙i Pr関ost for automating this! */
56 printStyleSheet = document.createElement('style');
57 printStyleSheet.setAttribute('media', 'print');
58 document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild);
59 printStyleSheet = printStyleSheet.styleSheet;
60 printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}');
61 printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}');
62 }
63 },
64 readPropertyChange: function () {
65 var el, display, v;
66 el = event.srcElem