jQuery系列:N种方法大总结
jquery自定义属性,区分prop()和attr()
jQueryObject.prop( propertyName [, value ] ):为添加,获取属性(property),并非attribute。
jquery 1.6新增。
jquery:prop()和attr()的主要区别:
prop()
函数针对的是DOM元素(JS Element对象)的属性,
attr()函数针对的是DOM元素所对应的文档节点的属性。
js:property和attribute的主要区别:
1、(隐式)document.getElementById("testId").ggg = "new";
这种方法直接通过"."来给testID 设置属性ggg=“new”。
这种方法在前台不会展示该属性。
用$("#testId")[0].outerHTMl 也看不到ggg这个属性。
用jquery方法$("#testID").attr("ggg") 也获取不到ggg 属性的值。
2、(显示)document.getElementById("testId").setAttribute("ggg", "new");
在前台会展示该属性,用jquery也可以获取到值
位置:document.getElementbyID("id").index=1,或者$("#id").prop(“index”,1)将index=1存放在哪里呢?见图
浏览器f12之后,例子$("#tab-title").prop("index",1)
页面元素并木有这个index=1这样的attrbute,但在Properties有。
jquery获取outHTML
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到。
看到有的人通过parent().html(),如果当前元素没有兄弟元素还行,如果有那就行不通了。后台实验发现有一个jQuery的一个方法可以解决,而且非常简便,如下:
jQuery.prop("outerHTML");
<div class="test"><p>hello,你好!</p></div> <script> $(".test").prop("outerHTML"); </script>
输出结果为:<div class="test"><P>hello,你好!</p></div>
因为原生JS DOM里有一个内置属性 outerHTML (看清大小写哦,JS是区分大小写的)用来获取当前节点的html代码(包含当前节点),所以用jQuery的prop()能拿到。
jquery获取元素个数
<ul>
<li></li>
<li></li>
<li></li>
</ul>
如上html,若要获取li的个数可使用:
$("ul > li").length;
jquery获取select选中的值和文本
本来以为jQuery("#select1").val();是取得选中的值,
那么jQuery("#select1").text();就是取得的文本。
这是不正确的,正确做法是:
jQuery("#select1 option:selected").text();
jquery().offset()
jquery获取一个元素的偏移距离offset。我个人称之为外部距离(相当节点内容以外,相对doc的距离,包含此节点一个内补白+一个边框宽度+一个外边距)
返回元素相对于文档document顶部、左边的距离;
有4部分构成=离documnet的距离+此元素的一个margin+此元素的一个border宽度+此元素的一个padding
$(selector).offset().top元素距离文档顶的距离,$(o).offset().left元素距离文档左边缘的距离。
$("#Div1").offset()
Object {top: 2121, left: 13}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 7 #wrap{padding:2px;} 8 ul 9 { 10 /* ul块级元素*/ /*块元素也可以定义行高line-height,定义之后好处:①有height②里面垂直居中*/ 11 height: 30px; 12 /*border: 1px solid red;*/ 13 } 14 li 15 { 16 line-height: 30px; 17 list-style: none; 18 float: left; 19 border: 1px solid green; 20 border-bottom: none; 21 } 22 </style> 23 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 24 </head> 25 <body> 26 <div id="wrap"> 27 <ul id="tab_t"> 28 <li class="act">选择1</li> 29 <li>选择2</li> 30 <li>选择3</li> 31 <li>选择4</li> 32 </ul> 33 </div> 34 35 <div id="study" style="margin:5px;padding:5px; border:3px solid red;">sad</div> 36 <br/> 37 <br/> 38 <br/> 39 <br/> 40 <br/> 41 <br/> 42 <br/> 43 <br/><br/> 44 <br/> 45 <br/> 46 <br/> 47 <br/> 48 <br/> 49 <br/> 50 <br/><br/> 51 <br/> 52 <br/> 53 <br/> 54 <br/> 55 <br/> 56 <br/> 57 <br/><br/> 58 <br/> 59 <br/> 60 <br/> 61 <br/> 62 <br/> 63 <br/> 64 <br/><br/> 65 <br/> 66 <br/> 67 <br/> 68 <br/> 69 <br/> 70 <br/> 71 <br/><br/> 72 <br/> 73 <br/> 74 <br/> 75 <br/> 76 <br/> 77 <br/> 78 <br/><br/> 79 <br/> 80 <br/> 81 <br/> 82 <br/> 83 <br/> 84 <br/> 85 <br/><br/> 86 <br/> 87 <br/> 88 <br/> 89 <br/> 90 <br/> 91 <br/> 92 <br/><br/> 93 <br/> 94 <br/> 95 <br/> 96 <br/> 97 <br/> 98 <br/> 99 <br/><br/> 100 <br/> 101 <br/> 102 <br/> 103 <br/> 104 <br/> 105 <br/><br/><br/> 106 <br/> 107 <br/> 108 <br/> 109 <br/> 110 <br/> 111 <br/> 112 <br/><br/> 113 <br/> 114 <br/> 115 <br/> 116 <br/> 117 <br/> 118 <br/> 119 <br/><br/> 120 <br/> 121 <br/> 122 <br/> 123 <br/> 124 <br/> 125 <br/> 126 <br/><br/><br/> 127 <br/> 128 <br/> 129 <br/> 130 <br/> 131 <br/> <div id="Div1" style="margin:5px;padding:5px; border:3px solid green;">sad</div> 132 <br/> 133 <br/><br/> 134 <br/> 135 <br/> 136 <br/> 137 <br/> 138 <br/> 139 <br/> 140 <br/><br/> 141 <br/> 142 <br/> 143 <br/> 144 <br/> 145 <br/> 146 <br/> 147 <br/><br/><br/> 148 <br/> 149 <br/> 150 <br/> 151 <br/> 152 <br/> 153 <br/> 154 <br/><br/> 155 <br/> 156 <br/> 157 <br/> 158 <br/> 159 <br/> 160 <br/> 161 <br/><br/> 162 <br/> 163 <br/> 164 <br/> 165 <br/> 166 <br/> 167 <br/> 168 <br/><br/><br/> 169 <br/> 170 <br/> 171 <br/> 172 <br/> 173 <br/> 174 <br/> 175 <br/><br/> 176 <br/> 177 <br/> 178 <br/> 179 <br/> 180 <br/> 181 <br/> 182 <br/><br/> 183 <br/> 184 <br/> 185 <br/> 186 <br/> 187 <br/> 188 <br/> 189 <br/><br/><br/> 190 <br/> 191 <br/> 192 <br/> 193 <br/> 194 <br/> 195 <br/> 196 <br/><br/> 197 <br/> 198 <br/> 199 <br/> 200 <br/> 201 <br/> 202 <br/> 203 <br/><br/> 204 <br/> 205 <br/> 206 <br/> 207 <br/> 208 <br/> 209 <br/> 210 <br/> 211 <br/> 212 </body> 213 </html>
jquery获取于第一个以定位的父元素的偏移距离,注意与上面偏移距(外部距离)的区别;
jQuery:position()返回一个对象,$(o).position().left = style.left,$(o).position().top = style.top;
jquery获取元素的尺寸
$(o).width() = o.style.width;
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;
注意:内嵌:要使用原生的style.xxx方法获取属性,这个元素必须已经有内嵌的样式,如<div style="...."></div>;
外部或者样式表:如果原先是通过外部或内部样式表定义css样式,必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值
jquery获取滚动条滚动的距离(浏览器窗口顶部与文档顶部之间的距离)
原生方法:window.pagYoffset——IE9+及标准浏览器 || document.documentElement.scrollTop 兼容ie低版本的标准模式 ||document.body.scrollTop 兼容混杂模式;
jQuery方法:$(document).scrollTop(); 一定是document
jquery获取屏幕的高度 和上面获取元素的尺寸一个道理
原生方法:window.innerHeight 标准浏览器及IE9+ || document.documentElement.clientHeight 标准浏览器及低版本IE标准模式 ||document.body.clientHeight 低版本混杂模式
jQuery方法: $(window).height()
jquery.data()
jquery必须版本1.6以上 自定义属性。约定。为一个元素,使用data-* <div data-title="自定义标题属性"> jquery取:之前: jquery("selector").attr('data-title') h5 jquery("selector").data('title') <select id="Search_" name="Search_province" class="form-control combobox" data-url="/Home/GetProvince" data-param='{"type":"0"}' data-text-field="Name" data-value-field="Id"></select> $("#Search_").data()//获取所有data-*属性键值对json对象。 //{valueField: "Id", textField: "Name", param: Object, url: "/Home/GetProvince"} <div id="awesome-json" data-awesome='{"game":"on"}'></div> var gameStatus= jQuery("#awesome-json").data('awesome').game; var gameStatus= jQuery("#awesome-json").data('awesome')//{game: "on"} console.log(gameStatus); //on
写入:attr()方法直接写到html页面中,在页面中能看到
data()是写到缓存中,在页面html看不到。
1,为JS对象提供缓存
2,为HTMLElement提供缓存
http://www.cnblogs.com/snandy/archive/2011/06/10/2077298.html参考 第二个注意。 // 为JS对象提供缓存 var myObj = {}; $.data(myObj, 'name', 'jack'); $.data(myObj, 'name'); // jack // 为HTMLElement提供缓存 <div id="xx"></div> <script> var el = document.getElementById('xx'); $.data(el, 'name', 'jack'); $.data(el, 'name'); // jack </script>
大总结
<!DOCTYPE> <html> <head> <title></title> <style type="text/css"> #wrap { width: 200px; height: 200px; background: red; margin: 20px auto; } </style> <script src="Scripts/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //第一种,html5取属性 var h5data = $("#wrap").data(); //h5遍历data-*属性 for (var key in h5data) { console.log(key + h5data[key]); //content内容 title标题 } //第二种, //"实例方法" 2个参数 var object = { name: "张三", age: 18 }; $("#wrap").data("sss", object); console.log($("#wrap").data("sss")); // Object{name: "张三", age: 18} //第三种HTMLElement添加缓存,只传一个对象 //相当于$("#wrap").data("name","张三") $("#wrap").data("age",18) $("#wrap").data(object); console.log($("#wrap").data("name")); //张三 console.log($("#wrap").data("age")); //18 //第四种为jquery包装集添加缓存 //为jquery对象赋值、取值的时候,要带上索引,不能是包装集 $.data($("#wrap"), "dd", object); console.log($.data($("#wrap"), "dd")); // undefined console.log($.data($("#wrap")[0], "dd")); // undefined $.data($("#wrap")[0], "dd", object); console.log($.data($("#wrap")[0], "dd")); // {name: "张三", age: 18} console.log($.data($("#wrap"), "dd")); // undefined $.data($("#wrap"), "dds", object); console.log($.data($("#wrap")[0], "dds")); // undefined // 第五种,为js对象添加缓存 //"静态方法"为js对象添加缓存 var obj = {}; $.data(obj, "dd", object); console.log(obj); // Object {jQuery111308423837379086763: Object} console.log($.data(obj, "dd")); //Object {name: "张三", age: 18} //只传一个对象 var temp = {"aaa":"a1","bbb":"b1"} $.data(obj, temp); console.log($.data(obj, "aaa")); //a1 console.log($.data(obj, "bbb")); //b1 }) </script> </head> <body> <div id="wrap" data-title="标题" data-content="内容"> </div> </body> </html>
清空追加&&基础追加html()&&append()
append是追加,html是完全替换
比如<p id="1"><p>123</p></p>
$("#1").html("<span>456</span>");
结果是:<p id="1"><span>456</span></p>
$("#1").append("<span></span>");
结果是:<p id="1"><p>123</p><span>456</span></p>
$('').index()
jquery获取元素索引值index()方法:
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1,传递一个jQuery对象
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
jquery获取元素索引值index()示例
//用于二级或者三级联动
<div id="nav">
<a href="http://www.51xuediannao.com/">建站素材</a>
<a href="http://www.51xuediannao.com/">jquery特效</a>
<a href="http://www.51xuediannao.com/">懒人主机</a>
<a href="http://www.51xuediannao.com/qd63/">前端路上</a>
</div>
$("#nav a").click(function(){
//四个经典的用法
var index1 = $("#nav a").index(this);
var index2 = $("#nav a").index($(this));
var index3 = $(this).index()
var index3 = $(this).index("a")
alert(index3);
return false;
});
jQuery 使得文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点!
这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了,
可是当我们使用了jQuery 这样$("#nameInput") 返回的就不是DOM对象了而是jQuery对象,
这样的话$("#nameInput").focus()这个方法的意义也就变了,
并不是使这个文本框获得焦点 而是触发这个文本框所有绑定在onfocus的函数!
其实使用jQuery也非常简单将jQuery对象转化为一个DOM对象,这一点相信开发人员早就考虑到了,诶 真是先天下之忧而忧啊
$("#nameInput")[0].focus() 简单的加一个[0] 便是我们想要的了!! $中没有获取焦点 js有!!!!
$.inArray() 原生js indexOf
值之间的比较是严格比较(愚人码头注:即,===或!==比较)。下面这段代码返回 -1
(没有找到) , 因为字符串数组中不可能找到一个数字:
$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] ); -1 $.inArray( 5 + 5, [ "8", "9", "10", 10 + "",10 ] ); 4 $.inArray( {}, [ {} ] ); -1 $.inArray( {a:1}, [ {a:1} ] ); -1