jquery方法大总结②

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}

  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()

18

$("#study").innerHeight()

28

$("#study").outerHeight()

34

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

44

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; 
});

时间： 2024-12-14 11:21:09

jquery方法大总结②的相关文章

jquery——九宫格大转盘抽奖

一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510p

C# 窗体间传值方法大汇总

第一种方法:创建一个类,里面声明用于存储接收的字段.传的时候存储于字段中,要用的时候,直接类名.字段名 进行调用.(这种方法传递是双向的) 第二种方法:1.在Form1里定义 public string Name = "*****" 2. 在Form2里创建Form1对象, Form1 f = new Form1(); 然后就可以通过f.Name取值了 第三种方法:用构造函数在窗体Form2中 int value1; string value2; public Form2 ( int 

html()和text()这两个jQuery方法有什么区别

html()和text()这两个jQuery方法有什么区别:标题中的两个方法是jQuery非常常用的两个方法,并且有时候作用似乎是一模一样的,其实这只是一种假象而已,下面结合实例来介绍一下他们的区别,首先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

Javascript或jQuery方法产生任意随机整数

方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || !e){return "?";}        return Math.floor( ( Math.random() * e ) + b );    }    $(window).load = $(".ps"+diu_Randomize(1,12)).show();//1

JS~jwPlayer为js预留的回调方法大总结

对于一个成功的产品,它是对外封闭的,但又是对外开放的,这句话并不矛盾,让我来说一下,说它对外封闭是因为它本身的代码不允许你去修改,而说它开放,是因为它为我们定义了很多API,或者叫回调方法,对于jwplayer来说,它为我们提供了很多js的回调方法(事件),它被包含在events属性上的． 应用场合 播放时记录当前视频的时间,播放完成时写入完成的时间,像这些功能,我们都可以通过事件回调的方法解决,即为events属性赋相应的值． 注意 测试时,jwplayer需要在正式网站上测试,而本地打开时,

将长的离谱的方法大卸八块

[将长的离谱的方法大卸八块] 代码块愈小,功能愈容易管理. 将代码拆成更小的代码移至更适合的类. 可使用的重构方法有:Extract Method. 下述代码块是一个函数的其中一部分代码,可以 Extract 成一个单独的 Method. 提取后的方法如下: 重构技术就是以微小的步伐修改程序.

jQuery方法属性

jQuery效果: jQuery隐藏/显示/切换 jQuery hide()隐藏  方法可用来隐藏HTML文本 jQuery show()显示  方法可用来显示HTML文本 jQuery toggle()切换  方法可用来切换hied()和show()方法,显示被隐藏的元素,并隐藏已显示的元素 jQuery淡入/淡出/切换/透明度 jQuery fadeIn() 淡入  方法用于淡入已隐藏的元素 jQuery fadeout() 淡出 方法用于淡出可见元素 jQuery fadetoggle()

原生js封装的一些jquery方法

用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }} addCla

jQuery技巧大放送

1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge