當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入浅出 JQuery (一) 浅析JQuery

發布時間：2025/4/5 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了深入浅出 JQuery (一) 浅析JQuery 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??1.? 概述

?????????????????? 一種新技術、新思維的出現都是因為它更方便了人們的需要，解決了目前的一些問題，它產生的同時有好處也有弊端，要看我們如何應用。

?????????????????? 前面已經給大家介紹了JavaScript腳本語言，它在很大程度上幫助Web開發者提高了瀏覽器的交互能力和動態效果，但是隨著互聯網的迅速發展，不能滿足用戶對于頁面的展示形式和用戶體驗度的迫切需求，于是一些牛X的人們對JavaScript做了進一步的封裝、擴展，建立了一個強大的JavaScript代碼庫，起名為JQuery。

?????????????????? 最初，它是由一個美國人所創建的一個開源項目，慢慢的越來越多的人使用而流行起來，它的主旨是：以更少的代碼，實現更多的功能即(Write Less ,Do More)。

?????????????????? 使用之前需要用到JQuery庫文件。

???????????????????JQuery庫文件可以從這里下載：www.jquery.com

???????2. 實現主要功能

?????????????????? a.控制DOM、CSS

?????????????????? b.處理頁面事件

???????????????????c.大量插件在頁面中應用

?????????????????? d.完美結合Ajax

?????? 3. 風格

??????????????? 美元符號$

?????????????? 事件操作鏈式寫法

????????????????????? 編寫頁面某元素的事件時,可以采用鏈式書寫,使得代碼更簡潔.

???????4. 基本語法

[javascript]?view plaincopyprint?

<span?style="font-size:18px;">//?JavaScript?Document??

//第一種寫法??

$(document).ready(function(){?????????

??????//代碼段??

?????????????????});??

//第二種寫法??

$(function(){??

????//代碼段??

????????});</span>??

????????????????? 上述兩種寫法是一致的，那么它們什么意思呢？既然JQuery是JavaScript的擴展，在JavaScript中會有與之對應的代碼，看下面代碼：

[javascript]?view plaincopyprint?

<span?style="font-size:18px;">window.οnlοad=function(){??

??????//代碼段??

????????????????????????};</span>??

????????????????? 區別：

????????????????????????? 執行時間不同

???????????????????????????????? Jquery是在Jquery庫加載完畢后執行，而JavaScript是在頁面全部加載完后執行，顯然，前者執行效率高些。

????????????????????????? 執行數量不同

???????????????????????????????? 他們都可以執行多次，但是Jquery每次都會有輸出結果，而JavaScript只會有一次輸出結果。

?????? 5. 訪問控制DOM、CSS實例

?????????????? 看下面代碼實現了給按鈕綁定單擊事件，當單擊時自動獲取文本框、單選按鈕值，然后顯示在一個DIV標簽中。

[html]?view plaincopyprint?

<span?style="font-size:18px;"><head>??

<title>控制DOM</title>??

??

????$(function(){??

????????$("#btnSubmit").click(function(){??

??????????

????????????//獲取文本框的值??

????????????var?txtValue=$("#txtName").val();??

??????????????

????????????//獲取單選按鈕值??

????????????var?radValue=$("#radSex1").is(":checked")?"男":"女";??

????????????//顯示文本框內容和值??

????????????$("#tip").css("display","block").html(txtValue+"<br>"+radValue);??

??????????????

????????});??

????});??

??????

</script>??

??

</style>??

</head>??

<body>??

????<div?class="Frame">??

????????<div?class="Title">??

????????????輸入如下信息：??

????????</div>??

????????<div?class="Content">??

????????????姓名：<input?id="txtName"?type="text"?class="txtCss"/>??

????????????性別：<input?name="rad"?type="radio"?class="radio"?id="radSex1"?value="男"/>??

????????????男??

??????????????????<input??name="rad"?id="radSex"?type="radio"?value="女"/>?女??

????????</div>??

????????<div?class="Btn">??

????????????<input?id="btnSubmit"?type="button"?value="提交"?class="btnCss"?/>??

????????</div>??

????</div>??????

????<div?id="tip">??

??????????

????</div>??

</body>??

</html></span>??

????????????????? 通過JQuery可以輕松的找到HTML元素，然后，進行各項操作不用使用GetElementById等方法先查找出來，當有很多事件需要添加時，也不需分別添加，只需要用鏈式往上添加即可。

???????????????????看一下顯示效果：

?????????????

???????????????代碼里還用到了一種JQuery選擇器：屬性過濾選擇器(:checked)，獲取表單中所有選中的元素，返回一個數組，更多選擇器應用將在下一篇博客介紹。

總結

以上是生活随笔為你收集整理的深入浅出 JQuery (一) 浅析JQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。