我給你寫一個jQuery遍歷HTML元素的案例，自己應(yīng)用到代碼上吧
成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、做網(wǎng)站與策劃設(shè)計,銀川網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:銀川等地區(qū)。銀川做網(wǎng)站價格咨詢:18982081108
div id="listcontact"
ul
lia href="#"·賬戶余額/a/li
lia href="#"·賬戶充值/a/li
lia href="#"·賬戶明細(xì)/a/li
/ul
/div
script
var Aobj=$("#listcontact li");
for(var a=0;aAobj.length;a++){
alert(Aobj[a].innerHTML);
}
/script
這是我空間自己整理的關(guān)于jQuery選擇器的文章 有興趣可參考下
和普通js文件一樣導(dǎo)入就可以用了，不用安裝
script type="text/javascript" src="./jquery-1.3.2.js"/script
scr=""中間為jquery的js文件的路徑
JQuery中的選擇器完全繼承了CSS得風(fēng)格。在學(xué)習(xí)JQuery選擇器之前首先要了解CSS常用選擇器。
雖然JQuey選擇器的寫法與CSS選擇器的寫法十分相似，只不過兩者的作用效果不用，CSS選擇器找到元素后是添加樣式，而JQuery選擇器找到元素后是添加行為。
CSS獲取到元素的代碼如下：
.demo{
... //給class為demo的元素添加樣式。
}
JQuery獲取到的元素的代碼如下：
$(".demo").click(function(){
.... //給class為demo的元素添加行為。
!DOCTYPE?HTML
html?lang="en"
head
meta?http-equiv?=?"X-UA-Compatible"?content?=?"IE=edge,chrome=1"?/
meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8"
titletest/title
link?rel="stylesheet"?href="css.css"?type="text/css"?media="screen"
script?src=""/script
/head
body
style?type="text/css"table?tr?td{border:1px?solid?#ddd;padding:15px;text-align:?center;background:?#f3f3f3}input{text-align:?center;}/style
div/div
div/div
table?id="t"
tr
td/tdtdname/tdtd單價/tdtd數(shù)量/tdtd總價/tdtddel/td
/tr
tr
td1/tdtdhtc/tdtd￥span1395.00/span/tdtdinput?type='button'?value='-'?onclick='less(this)'input?type='text'?style='width:30px'?name='num'?value='1'input?type='button'?value='+'?onclick='more(this)'/tdtdspan/span/tdtdspan?onclick='del(this)'del/span/td
/tr
tr
td2/tdtdapple/tdtd￥span5555.00/span/tdtdinput?type='button'?value='-'?onclick='less(this)'input?type='text'?style='width:30px'?name='num'?value='1'input?type='button'?value='+'?onclick='more(this)'/tdtdspan/span/tdtdspan?onclick='del(this)'del/span/td
/tr
tr
td3/tdtdMac/tdtd￥span9999/span/tdtdinput?type='button'?value='-'?onclick='less(this)'input?type='text'?style='width:30px'?name='num'?value='1'input?type='button'?value='+'?onclick='more(this)'/tdtdspan/span/tdtdspan?onclick='del(this)'del/span/td
/tr
tr
td?COLSPAN='6'合計:￥span/span/td
/tr
/table
input?type="button"?value="加一行"?onclick="tr_more()"
script?type="text/javascript"
$(function(){
heji();
})
function?heji(){
var?tr=$("#t").find("tr").length;
var?total=0;
for(i=1;itr-1;i++){//略過第一行和最后一行
var?price=$('table#t?tr:eq('+i+')?td:eq(2)').find('span').html();
var?num=$('table#t?tr:eq('+i+')?td:eq(3)').find('input:eq(1)').val();
$('table#t?tr:eq('+i+')?td:eq(4)').find('span').html('￥'+eval(price*num));
total=eval(total+eval(price*num));
}
$('table#t?tr:eq('+eval(tr-1)+')?td').find('span').html(total);
}
function?less(e){
var?num=$(e).parent().find('input:eq(1)').val();
if(num=0){num=0}else{num--}
$(e).parent().find('input:eq(1)').val(num);
heji();
}
function?more(e){
var?num=$(e).parent().find('input:eq(1)').val();
if(num0){num=0}else{num++}
$(e).parent().find('input:eq(1)').val(num);
heji();
}
function?del(e){
$(e).parent().parent().remove();
heji();
}
function?tr_more(){
var?tr=$("#t").find("tr").length;
var?trr=tr-2;
var?newRow?=?"trtd"+eval(tr-1)+"/tdtdMac/tdtd￥span9999/span/tdtdinput?type='button'?value='-'?onclick='less(this)'input?type='text'?style='width:30px'?name='num'?value='1'input?type='button'?value='+'?onclick='more(this)'/tdtdspan/span/tdtdspan?onclick='del(this)'del/span/td/tr";
$('table#t?tr:eq('+trr+')').after(newRow);
heji();
}
/script
/body
/html
Android的ProgressDialog效果就是典型的android實(shí)現(xiàn)jquery效果的應(yīng)用。
首先需要創(chuàng)建ProgressDialog對象，然后使用線程控制進(jìn)度條顯示，具體源代碼：
package com.yarin.android.TestOnPDialog;
import android.app.Activity;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class PDialog extends Activity
{
private Button mButton01,mButton02;
int m_count = 0;
//聲明進(jìn)度條對話框
ProgressDialog m_pDialog;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//得到按鈕對象
mButton01 = (Button)findViewById(R.id.Button01);
mButton02 = (Button)findViewById(R.id.Button02);
//設(shè)置mButton01的事件監(jiān)聽
mButton01.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
//創(chuàng)建ProgressDialog對象
m_pDialog = new ProgressDialog(PDialog.this);
// 設(shè)置進(jìn)度條風(fēng)格，風(fēng)格為圓形，旋轉(zhuǎn)的
m_pDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
// 設(shè)置ProgressDialog 標(biāo)題
m_pDialog.setTitle("提示");
// 設(shè)置ProgressDialog 提示信息
m_pDialog.setMessage("這是一個圓形進(jìn)度條對話框");
// 設(shè)置ProgressDialog 標(biāo)題圖標(biāo)
m_pDialog.setIcon(R.drawable.img1);
// 設(shè)置ProgressDialog 的進(jìn)度條是否不明確
m_pDialog.setIndeterminate(false);
// 設(shè)置ProgressDialog 是否可以按退回按鍵取消
m_pDialog.setCancelable(true);
// 設(shè)置ProgressDialog 的一個Button
m_pDialog.setButton("確定", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int i)
{
//點(diǎn)擊“確定按鈕”取消對話框
dialog.cancel();
}
});
// 讓ProgressDialog顯示
m_pDialog.show();
}
});
//設(shè)置mButton02的事件監(jiān)聽
mButton02.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
m_count = 0;
// 創(chuàng)建ProgressDialog對象
m_pDialog = new ProgressDialog(PDialog.this);
// 設(shè)置進(jìn)度條風(fēng)格，風(fēng)格為長形
m_pDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
// 設(shè)置ProgressDialog 標(biāo)題
m_pDialog.setTitle("提示");
// 設(shè)置ProgressDialog 提示信息
m_pDialog.setMessage("這是一個長形對話框進(jìn)度條");
// 設(shè)置ProgressDialog 標(biāo)題圖標(biāo)
m_pDialog.setIcon(R.drawable.img2);
// 設(shè)置ProgressDialog 進(jìn)度條進(jìn)度
m_pDialog.setProgress(100);
// 設(shè)置ProgressDialog 的進(jìn)度條是否不明確
m_pDialog.setIndeterminate(false);
// 設(shè)置ProgressDialog 是否可以按退回按鍵取消
m_pDialog.setCancelable(true);
// 讓ProgressDialog顯示
m_pDialog.show();
new Thread()
{
public void run()
{
try
{
while (m_count = 100)
{
// 由線程來控制進(jìn)度。
m_pDialog.setProgress(m_count++);
Thread.sleep(100);
}
m_pDialog.cancel();
}
catch (InterruptedException e)
{
m_pDialog.cancel();
}
}
}.start();
}
});
}
}
這段時間在學(xué)習(xí)研究jQuery源碼，受益于jQuery日益發(fā)展強(qiáng)大，研究jQuery的大牛越來越多，學(xué)習(xí)的資料也比前兩年好找了，有很多非常不錯的資源，如高云的jQuery1.6.1源碼分析系列。這些教程非常細(xì)致的分析了jQuery內(nèi)部原理和實(shí)現(xiàn)方式，對學(xué)習(xí)和理解jQuery有非常大的幫助。但是個人認(rèn)為很多教程對jQuery的整體結(jié)果把握不足，本人試圖從整體來闡述一下jQuery的內(nèi)部實(shí)現(xiàn)。
大家知道，調(diào)用jQuery有兩種方式，一種是高級的實(shí)現(xiàn)，通過傳遞一個參數(shù)實(shí)現(xiàn)DOM選擇，如通過$(“h1″)選擇所有的h1元素，第二種是較為低級的實(shí)現(xiàn)，如果通過$.ajax實(shí)現(xiàn)ajax的操作。那么，這兩種方式到底有何不同？用typeof函數(shù)檢測$(‘h1′)和$.ajax,類型分別為object和function，稍微學(xué)過jQuery的都知道或者聽過過，前者返回的是一個jQuery對象，那么jQuery對象是什么，它和jQuery是什么關(guān)系呢？我們先來通過for(var
i
in
$(”))
document.write(i+”
:::”+$(“”)[i]+””);打印一下jQuery對象的屬性和對應(yīng)的值,可以看到它有100多個屬性，通過console輸入$(“*”)可以看到大部分屬性是繼承自jQuery原型的屬性，jQuery對象實(shí)際上是這樣一個對象:
所以我們來推測，jQuery的實(shí)現(xiàn)可能是類似這樣的：
function
jQuery(){
this[0]="Some
DOM
Element";
this[1]="Some
DOM
Element";
this[2]="Some
DOM
Element";
this.length=3;
this.prevObject="Some
Object";
this.context="Some
Object";
this.selector="Some
selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}
這些代碼通過new操作符就就能創(chuàng)建出擁有上述屬性的jQuery對象,但是實(shí)際上我們調(diào)用jQuery創(chuàng)建jQuery對象時并沒有使用new操作符，這是如何實(shí)現(xiàn)的呢？來看jQuery的實(shí)現(xiàn):
var
jQuery
=
function(
selector,
context
)
{
//
The
jQuery
object
is
actually
just
the
init
constructor
'enhanced'
return
new
jQuery.fn.init(
selector,
context,
rootjQuery
);
}
jQuery.fn=jQuery.prototype={
jquery:
core_version,
init:function(selector,context){
//some
code
return
this;
}
//some
code
there
//......
}
jQuery.fn.init.prototype=jQuery.fn;
這里有幾點(diǎn)做得非常巧妙的地方,第一點(diǎn)是通過jQuery原型屬性的init方法來創(chuàng)建對象來達(dá)到不用new創(chuàng)建對象的目的，第二點(diǎn)是對init方法內(nèi)this指向的處理。我們知道，通過調(diào)用init返回一個jQuery的實(shí)例，那么這個實(shí)例就必須要繼承jQuery.prototype的屬性，那么init里面這個this,
就繼承jQuery.prototype的屬性。但是init里面的this，受制于作用域的限制，并不能訪問jQuery.prototype其它的屬性，jQuery通過一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,這樣以來，init產(chǎn)生的jQuery對象就擁有了jQuery.fn的屬性。
到這里，一個jQuery的基本原型就浮出水面了。這里有兩個對象，一個是jQuery這個構(gòu)造函數(shù)，另外一個是這個構(gòu)造函數(shù)產(chǎn)生的對象(我們稱之為jQuery對象，它和普通對象沒有什么區(qū)別),
如下關(guān)系圖:
可以看到j(luò)Query構(gòu)造函數(shù)和jQuery.prototype均有各自的屬性和方法，兩者的調(diào)用方法各不一樣,這兩個對象都有一個extend方法，都是用來擴(kuò)展自身的屬性和方法，在jQuery內(nèi)部，extend的實(shí)現(xiàn)實(shí)際是靠一樣的代碼,
將在后面的源碼分析中做以詳細(xì)的分析。
重慶分公司
重慶分公司
