一、JQ簡(jiǎn)介

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，它封裝了JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。

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

二、JQ語(yǔ)法

?

1.頁(yè)面加載完成之后：

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

?

　　$(function(){});

2.選擇器

　　JS：document.getElementById();

　　JQ: $(選擇器)　　

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

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

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

3.操作內(nèi)容

　　Js：? 表單 dom.value

?

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

?

　　Jq? 　表單 $.val()???? $.val(‘值’)?? 括號(hào)里是修改的值??? 參數(shù)是調(diào)用的值

?

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

4.操作屬性

　　JS: setAttribute　　　　　　　　getAttribute

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

　　改多個(gè)變量時(shí)

?　　 $.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.循環(huán)遍歷

　　$().each(function(){????????????? each 是循環(huán)

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

　　})

Jq轉(zhuǎn)dom對(duì)象

　　$(‘#dd’)?? 變?yōu)???? $(‘#dd’)[0]?? 或$(‘#dd’).get(0)

Js 轉(zhuǎn) jq

　　Var dom =document.getElementBuId();

　　$(dom)

?下面是JQ控制全選按鈕

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

下面是html代碼

<p class="title">考試三 表格復(fù)選框全選</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的結(jié)束

?

　　在each代碼塊內(nèi)不能使用break和continue,要實(shí)現(xiàn)break和continue的功能的話，要使用其它的方式：
　　　　break----用return false;

?

　　　　continue --用return true;

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。