[JQuery]JQuery的取值

  JQuery无疑是现在比较流行的js开发库之一,在web开发,特别是服务器组件开发中起到了很大的作用。而且在一些公司的面试中,问及js

就问你,用过JQuery吗?没用过,那种眼神似乎你低人一等似的。废话少说,优秀的东西还是学习学习的,不管在做项目的时候,是否为了公司

整体的需要不用这个,还是值得我们好好研究下。

 

$(html)
功能:根据参数html创建DOM元素
返回:jQuery对象
参数:要创建的html
例子:将html添加到body中
$("
<div><p>Hello</p></div>").appendTo("body")

 

$(elems)
 功能:包装jQuery一个或多个DOM元素,这个函数也接受xml Document元素或Window Object作为有效的参数,甚至不是Dom元素
 返回:jQuery对象
参数:dom元素或dom元素数组
例子:
设定页面的背景色
$(document.body).css( "background", "black" );
隐藏指定表单中的input元素
$( myForm.elements ).hide()

 

$(fn)
功能:$(document).ready()的快捷方式,允许你绑定一个的函数到页面完成加载的时候执行
返回:jQuery对象
参数:Dom ready后要执行的函数
例子:
$(function(){
  // Document is ready
});

 

 

$(expr, context)
功能:根据css或基本的xpath选择器查找元素
返回:jQuery对象
参数:
expr (String): 要搜索的表达式
context (Element|jQuery): (可选的)dom元素,Document或jQuery对象,作为当前选择的上下文 
例子:
jQuery Code
$("div > p")
Before
<p>one</p> <div><p>two</p></div> <p>three</p>
Result:
<p>two</p> ]
Example
Searches for all inputs of type radio within the first form in the document
jQuery Code
$("input:radio", document.forms[0])

 

 

$.extend(prop)
功能:扩展jQuery自身,添加函数到jQuery命名空间或插件方法
返回:Object
参数:
例子:
Adds two plugin methods.
jQuery Code
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();
Adds two functions into the jQuery namespace
jQuery Code
jQuery.extend({
  min: function(a, b) { return a 
< b ? a : b; },
  max: function(a, b) { return a 
> b ? a : b; }
});

 

 

each(fn)
功能:遍历元素并添加响应函数
返回:jQuery对象
参数:fn (Function): A function to execute 
例子:
Iterates over two images and sets their src property
jQuery Code
$("img").each(function(i){
  this.src = "test" + i + ".jpg";
});
Before
<img/><img/>
Result:
<img src="test0.jpg"/><img src="test1.jpg"/>

 

 

eq(pos)
功能:返回指定位置的一个元素,位置是指匹配的元素从0到length – 1的位置
返回:jQuery对象
参数:pos (Number): The index of the element that you wish to limit to. 
例子:
jQuery Code
$("p").eq(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
<p>So is this</p> ]

 

 

get()
功能:返回所有匹配的dom元素
返回:元素数组
参数:
例子:
Selects all images in the document and returns the DOM Elements as an Array
jQuery Code
$("img").get();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
<img src="test1.jpg"/> <img src="test2.jpg"/> ]

 

 

get(num)
功能:返回指定索引位置的dom元素
返回:DOM Element
参数:num (Number): Access the element in the Nth position. 
例子:
Selects all images in the document and returns the first one
jQuery Code
$("img").get(0);
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
<img src="test1.jpg"/>

 

 

gt(pos)
功能:返回某个位置之后的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements after this position. 
例子:
jQuery Code
$("p").gt(0)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
<p>So is this</p> ]

 

 

lt(pos)
功能:返回某个位置之前的元素
返回:jQuery对象
参数:pos (Number): Reduce the set to all elements below this position. 
例子:
jQuery Code
$("p").lt(1)
Before
<p>This is just a test.</p><p>So is this</p>
Result:
<p>This is just a test.</p> ]

 

 

size()
功能:匹配元素的个数
返回:
参数:
例子:
jQuery Code
$("img").size();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

 

 

length
功能:匹配元素的个数,同size函数
返回:
参数:
例子:
jQuery Code
$("img").length;
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

 

 

index(subject)
功能:搜索所有匹配的元素,返回索引值
返回:
参数:subject (Element): Object to search for 
例子:
Returns the index for the element with ID foobar
jQuery Code
$("*").index( $('#foobar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
0Returns the index for the element with ID foo within another element
jQuery Code
$("*").index( $('#foo')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
2
Returns -1, as there is no element with ID bar
jQuery Code
$("*").index( $('#bar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
-1

 

 

$.noConflict()
功能:避免和以前移入的jQuery库的冲突
返回:undefined
参数:
例子:
Maps the original object that was referenced by $ back to $
jQuery Code
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏