一、JQ簡介

jQuery是一個快速、簡潔的JavaScript框架，它封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

裝載的先后次序：　　jQuery封裝庫在上，Js代碼在下。

二、JQ語法

?

1.頁面加載完成之后：

　　$(document).ready()=function(){};

?

　　$(function(){});

2.選擇器

　　JS：document.getElementById();

　　JQ: $(選擇器)　　

　　　　id選擇器：$(“#id名稱”);

　　　　元素選擇器：$(“元素名稱”);

　　　　類選擇器：$(“.類名”);

3.操作內容

　　Js：? 表單 dom.value

?

????????　　 非表單 dom.innerHTML

?

　　Jq? 　表單 $.val()???? $.val(‘值’)?? 括號里是修改的值??? 參數是調用的值

?

????????　　 非表單$.html()?????????????? 括號里是修改的值

4.操作屬性

　　JS: setAttribute　　　　　　　　getAttribute

　　JQ:attr（‘class’，‘dd’） ? ???　attr（‘class’）

　　改多個變量時

?　　 $.attr({屬性名：屬性值，屬性名：屬性值})??????

5.操作樣式

　　Js????? dom.style

　　Jq???? $.css(屬性名，屬性值)

?

6.事件

　　Js????? dom.addElementL

????????　　 Dom.click = function

　　Jq???? $.click(function(){})

　　　　$(‘input:checked’)

　　　　$(‘input[type=”checkbox”]:checked’)

　　　　$(‘input:checkbox:checked’)

7.循環遍歷

　　$().each(function(){????????????? each 是循環

????????　　 $(this).

　　})

Jq轉dom對象

　　$(‘#dd’)?? 變為 ??? $(‘#dd’)[0]?? 或$(‘#dd’).get(0)

Js 轉 jq

　　Var dom =document.getElementBuId();

　　$(dom)

?下面是JQ控制全選按鈕

$(document).ready(function(){ //全選
?? ?$('#all').click(function(){
?? ??? ?//當全選框選中時
?? ??? ?if($("#all").prop('checked')){?? ?//if($('#all:checked')){?? 不能得到選中，只得到? 1
?? ??? ??? ?//循環給多選框選中
?? ??? ??? ?$('.more').each(function (){
?? ??? ??? ??? ?$(this).prop('checked',true);
?? ??? ??? ?})
?? ??? ?}else{
?? ??? ??? ?//循環給多選框不選中
?? ??? ??? ?$('.more').each(function (){
?? ??? ??? ??? ?$(this).prop('checked',false);
?? ??? ??? ?})
?? ??? ?}
?? ?});
?? ?//多選
?? ?$('.more').click(function(){
?? ??? ?//定義標志
?? ??? ?var $flag = true;
?? ??? ?//遍歷多選框，找到未選中的元素，標志設為false
?? ??? ?$('.more').each(function (){
?? ??? ??? ?if($(this).prop('checked') == false){
?? ??? ??? ??? ?$flag = false;
?? ??? ??? ??? ?return false;
?? ??? ??? ?}
?? ??? ?});
?? ??? ?//標志賦值給全選
?? ??? ?$('#all').prop('checked',$flag);
?? ?}) });

下面是html代碼

<p class="title">考試三 表格復選框全選</p> <table><tr><th><input id="all" type="checkbox">全選</th><th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td><input class="more" type="checkbox"></td><td>張三</td><td>男</td><td>23</td></tr><tr><td><input class="more" type="checkbox"></td><td>李四</td><td>男</td><td>25</td></tr><tr><td><input class="more" type="checkbox"></td><td>王五</td><td>女</td><td>23</td></tr> </table> View Code

?注意：

　　prop（‘checked’） 返回true false

　　attr（‘checked’） 返回checked

each的結束

?

　　在each代碼塊內不能使用break和continue,要實現break和continue的功能的話，要使用其它的方式：
　　　　break----用return false;

?

　　　　continue --用return true;

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的jquery简介 each遍历 prop attr的全部內容，希望文章能夠幫你解決所遇到的問題。

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