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>

如上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}

  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]来获取样式值

$("#study").height()

$("#study").innerHeight()

$("#study").outerHeight()

$("#study").outerHeight(true)

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

posted on 2016-03-14 11:52 李可在江湖阅读(544) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

李可

导航

公告