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}

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         #wrap{padding:2px;}

         ul

         {

             /* ul块级元素*/ /*块元素也可以定义行高line-height，定义之后好处：①有height②里面垂直居中*/

             height: 30px;

             /*border: 1px solid red;*/

         }

         li

         {

             line-height: 30px;

             list-style: none;

             float: left;

             border: 1px solid green;

           border-bottom: none;

         }

     </style>

     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

 </head>

 <body>

 <div id="wrap">

     <ul id="tab_t">

         <li class="act">选择1</li>

         <li>选择2</li>

         <li>选择3</li>

         <li>选择4</li>

     </ul>

     </div>

     <div id="study" style="margin:5px;padding:5px; border:3px solid red;">sad</div>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/> <div id="Div1" style="margin:5px;padding:5px; border:3px solid green;">sad</div>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/><br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

 </body>

 </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。

复制代码代码如下:

$('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