Jquery The $() factory function

qiaolevip

浏览: 4897327 次
性别:
来自: 上海

最近访客更多访客>>

liunancun

xuweije

hjz

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA 乔乐共享

JAVA 乔乐共享 jquery

jQuery	Description
Tag Name:	Represents a tag name available in the DOM. For example $('p') selects all paragraphs in the document.
Tag ID:	Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
Tag Class:	Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.

NOTE: The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().

Example:

Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      var pars = $("p");
      for( i=0; i<pars.length; i++ ){
         alert("Found paragraph: " + pars[i].innerHTML);
      }
   });
   </script>
</head>
<body>
   <div>
      <p class="myclass">This is a paragraph.</p>
      <p id="myid">This is second paragraph.</p>
      <p>This is third paragraph.</p>
   </div>
</body>
</html>
To understand it in better way you can Try it yourself.

How to use Selectors?
The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.

Following table lists down few basic selectors and explains them with examples.

Selector	Description
Name	Selects all elements which match with the given element Name.
#ID	Selects a single element which matches with the given ID
.Class	Selects all elements which match with the given Class.
Universal (*)	Selects all elements available in a DOM.
Multiple Elements E, F, G	Selects the combined results of all the specified selectors E, F or G.
Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors:

$('*'): This selector selects all elements in the document.

$("p > *"): This selector selects all elements that are children of a paragraph element.

$("#specialID"): This selector function gets the element with id="specialID".

$(".specialClass"): This selector gets all the elements that have the class of specialClass.

$("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".

$("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.

$("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.

$("ul li:first"): This selector gets only the first <li> element of the <ul>.

$("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.

$("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>

$("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.

$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.

$("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.

$("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.

$(":empty"): Selects all elements that have no children.

$("p:empty"): Selects all elements matched by <p> that have no children.

$("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.

$("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.

$("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.

$("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.

$("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.

$("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar

$("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.

$("li:even"): Selects all elements matched by <li> that have an even index value.

$("tr:odd"): Selects all elements matched by <tr> that have an odd index value.

$("li:first"): Selects the first <li> element.

$("li:last"): Selects the last <li> element.

$("li:visible"): Selects all elements matched by <li> that are visible.

$("li:hidden"): Selects all elements matched by <li> that are hidden.

$(":radio"): Selects all radio buttons in the form.

$(":checked"): Selects all checked boxex in the form.

$(":input"): Selects only form elements (input, select, textarea, button).

$(":text"): Selects only text elements (input[type=text]).

$("li:eq(2)"): Selects the third <li> element

$("li:eq(4)"): Selects the fifth <li> element

$("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.

$("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.

$("li:gt(1)"): Selects all elements matched by <li> after the second one.

$("p:gt(2)"): Selects all elements matched by <p> after the third one.

$("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.

$("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.

$("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>

$("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.

$("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.

$(":parent"): Selects all elements that are the parent of another element, including text.

$("li:contains(second)"): Selects all elements matched by <li> that contain the text second.

You can use all the above selectors with any HTML/XML element in generic way. For example if selector $("li:first") works for <li> element then $("p:first") would also work for <p> element.

分享到：

MySQL CONCAT Function | Jquery Useful Attribute Methods

2011-12-31 13:50
浏览 2286
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery The $() factory function

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery The $() factory function

评论

发表评论

相关推荐

Ubuntu VirtualBox 安装win10报错：FATAL: No bootable medium found! System halted.

win10 webstorm9和10无法使用terminal解决方案

String,StringBuffer与StringBuilder的区别

HashMap与HashTable的区别(含源码分析)

java判断中英文长度并截取部分添加省略号

JAVA比较两个日期的差值天数

Eclipse GBK代码转移到UFT-8编码上去，迁移方案

CMD命令一键备份文件目录

Navicat 中文乱码问题

java写入xml格式数据增强版-可递归进行多层嵌套

Java XMLWriter 快速创建xml文件

Java循环复杂map，foreach

Java超全Json工具类JsonUtil

java占位符像C#{0}那样简单

jQuery判断对象是否显示或隐藏

通过dos命令获得服务器网卡地址-适合Windows和Linux

js正则表达式过去\反斜杠的问题解决方案

struts+json所含的jar包全集

Java新建线程异步调用示例

Java替换字符串正则表达式和其3种方法

最近访客更多访客>>