jquery特效代碼，jq特效代碼

大家好，關(guān)于jquery特效代碼很多朋友都還不太明白，今天小編就來為大家分享關(guān)于jq特效代碼的知識，希望對各位有所幫助！

ASP.NET jQuery實例5 (顯示CheckBoxList成員選中的內(nèi)容)

這章我們主要看下如何通過jQuery來獲取CheckBoxList成員內(nèi)容

界面代碼：

復制代碼

代碼如下:

<formid="form1"runat="server">

<divalign="left">

<p>

請選擇語言</p>

<asp:CheckBoxListID="ckbListPro"runat="server">

<asp:ListItemValue="1"Text="C#"></asp:ListItem>

<asp:ListItemValue="2"Text="JAVA"></asp:ListItem>

<asp:ListItemValue="3"Text="C++"></asp:ListItem>

<asp:ListItemValue="4"Text="JavaScript"></asp:ListItem>

</asp:CheckBoxList>

</fieldset>

<br/>

<divid="message"></div>

</div>

</form>

顯示效果：

實現(xiàn)選中語言并顯示內(nèi)容腳本代碼：

代碼如下:

<scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>

<scripttype="text/javascript">

$(document).ready(function(){

//CheckBoxList在頁面呈現(xiàn)時轉(zhuǎn)換為<tableid="ckbListPro">

//成員ListItem轉(zhuǎn)換為<inputtype="checkbox"><label>

$("#<%=ckbListPro.ClientID%>").click(function(){

varstr="";

//這里獲取到被選中的<inputtype="checkbox">

$("#<%=ckbListPro.ClientID%>input[type=checkbox]:checked").each(function(){

str=str+$(this).val()+":"+$(this).next().text()+"";//這里的next()表示<label>

});

$("#message").text(str);

});

</script>

選中語言后界面：

原生JS代碼和用jQuery實現(xiàn)效果各有什么優(yōu)劣勢

最終實現(xiàn)的效果肯定是可以一樣的jquery作為一個庫，為的就是更容易地實現(xiàn)效果，而且也在兼容性方面做了許多努力用原生js的話，需要關(guān)注到的東西還是很多的，如果是初學而又馬上要干活的話，建議還是用jquery當然，jquery也非萬能，許多時候還是要搭配著用，只是能用Jquery時一般都用jquery

jquery+CSS3實現(xiàn)3D拖拽相冊效果

拖放（Drag和drop）是HTML5標準的組成部分。瀏覽器支持:InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。被拖元素，dragElement:(1)添加事件：ondragstart(2)添加屬性：dragable放置元素，dropElement:1、添加事件：ondargenter,ondragover,ondragleave,ondragend,ondrop和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會用例子來說明。2、頁面上元素間的拖放下面用個小例子，div間的拖放來展示，各個事件如何被觸發(fā)：系統(tǒng)中選擇的一個或多個文件拖入該div中，files中會存儲拖入文件的信息，然后我們通過file可以得到文件的類型，長度，內(nèi)容然后實現(xiàn)上傳。3、setDragImage(image,x,y)用于設(shè)置鼠標移動過程中隨鼠標一起移動的效果圖。必須在dragstart中設(shè)置。4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖拽過程中鼠標顯示的樣式，不過通常可以忽略這幾個屬性，一般用不到。