Jquery實現(xiàn)顯示和隱藏的4種簡單方式

Html代碼：

創(chuàng)新互聯(lián)建站主營雙湖網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都App制作,雙湖h5小程序開發(fā)搭建,雙湖網(wǎng)站營銷推廣歡迎雙湖等地區(qū)企業(yè)咨詢

復制代碼

代碼如下:

div

class="topicList"

h3span學習天地/span/h3

ul

li1111111111/li

li2222222222/li

li333333333/li

li4444444444/li

li5555555555/li

li6666666666/li

/ul

/div

Jquery代碼：

第一種實現(xiàn)方式：

復制代碼

代碼如下:

1.

script

type="text/javascript"

$(function(){

$(".topicList

h3").click(function(){

var

UL

=

$(this).next("ul");

if(UL.css("display")=="none"){

UL.css("display","block");

}

else{

UL.css("display","none");

}

});

});

/script

第二種實現(xiàn)方式：

復制代碼

代碼如下:

2.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").hide(1000);

},function(){

$(this).next("ul").show(1000);

});

});

/script

第三種實現(xiàn)方式：

可以使用Jquery提供的show和hide來完成帶緩動的顯示和隱藏效果，由于兩個方法相似，可以直接使用toggle來完成。

復制代碼

代碼如下:

3.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").css("display","none");

},function(){

$(this).next("ul").css("display","block");

});

});

/script

第四種實現(xiàn)方式：

toggle如果有兩個參數(shù)，并且都是函數(shù)，表示第一次點擊執(zhí)行第一個函數(shù)，第二次點擊執(zhí)行第二個函數(shù)。

復制代碼

代碼如下:

4.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(topicHandler,topicHandler);

function

topicHandler(){

//使用fadeIn、show、slideDown可以完成某個容器的顯示

//使用fadeOut、hide、slideUp可以完成某個容器的隱藏

//所以可以通過各個的toggle來完成兩個之間的輪換

$(this).next("ul").toggle(1000);

}

});

/script

jquery怎么使用

jQuery是一款前端開發(fā)框架，jQuery使用的方法如下：

工具／原料：聯(lián)想威6、win10 20H2、jQuery 3.5.1。

1、jQuery給放到一個文件夾里面，方便我們待會引用這個jQuery，這里我就放到我項目的js文件夾里面。

2、然后我們來開始編輯HTML界面代碼。

3、如圖，使用script標簽把jQuery引入到我們的HTML界面。src引號里面的就是我們的jQuery路徑名稱。

4、接著再書寫一個script標簽對，里面寫上jQuery入口函數(shù)，這樣，當我們的HTML加載完成之后就會執(zhí)行我們的jQuery代碼，入口函數(shù)寫法有兩種，function里面就是用來書寫執(zhí)行代碼的。

5、如圖，我就使用alert來在網(wǎng)頁中彈出一個警告框。

6、這樣，當我們運行我們的網(wǎng)頁的時候，就會彈出一個窗口，里面有我們的警告內(nèi)容。至此，jQuery也算簡單的入門了解了。

jQuery簡單獲取DIV和A標簽元素位置的方法

本文實例講述了jQuery簡單獲取DIV和A標簽元素位置的方法。分享給大家供大家參考，具體如下：

一、獲取DIV的位置

var

top

=

jquery("#div_id").offset().top;

//獲取div的居上位置

var

left

=

jquery("#div_id").offset().left;

//獲取div的居左位置

var

height

=

jquery("#div_id").height();

//獲取div的高度

var

width

=

jquery("#div_id").width();

//獲取div的寬度

jquery("#div_id").css({'top':top,'left':left,'height':height,'width':width});

//設置DIV的css屬性

二、獲取A標簽的位置

a

href=""

rel="external

nofollow"

onclick="javascript:get_a(this,1)"獲取A標簽的位置/a

script

language="javascript"

function

get_a(thisObj,param){

var

top

=

jquery(thisObj).offset().top;

var

left

=

jquery(thisObj).offset().left;

var

height

=

jquery(thisObj).height();

var

width

=

jquery(thisObj).width();

}

/script

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jquery選擇器用法總結(jié)》、《jQuery表單操作總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》及《jQuery常見經(jīng)典特效匯總》

希望本文所述對大家jQuery程序設計有所幫助。

網(wǎng)頁題目：jquery簡單,jquery簡單計算器
文章位置：http://chinadenli.net/article23/dsshccs.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、建站公司、搜索引擎優(yōu)化、網(wǎng)站導航、商城網(wǎng)站、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)