JQuery学习笔记

JQuery学习笔记1基本语法在id选择器中，需要加上#号script中有src属性则不能再标签体重写代码1.1dom对象与jquery的转换$底层采用数组存放数据，故$value[0]，取出数据，既是dom对象$对象提供get()方法，取出dom对象，get(0)为第一个数据bodyinputtype=textid=usernamevalue=jack/scriptsrc=../js/jquery-1.8.3.js/scriptscripttype=text/javascript/*dom对象*/varvalue=document.getElementById(username);bodyinputtype=textid=usernamevalue=jack/scriptsrc=../js/jquery-1.8.3.js/scriptscripttype=text/javascriptvarvalue=$(#username).val();alert(value);/script/body/*$对象*/var$value=$(value);/*$转换为dom对象*/vardvalue=$value[0];vargvalue=$value.get(0);/script/body1.2页面加载Domscripttype=text/javascriptwindow.onload=function(){alert(11);}/script$scripttype=text/javascript$(document).ready(function(){alert(11);});/script2选择器2.1基本选择器2.1.1Id选择器通过标签中id的值，获取$对象$(#btn1).click(function(event){$(#one).css(background-color,red);});2.1.2Class选择器选中标签中有相应class属性的元素$(#btn2).click(function(event){$(.mini).css('background-color','yellow');});2.1.3标签选择器根据标签获取对象数组$(#btn3).click(function(event){$(div).css('background-color','green');});2.1.4多选择器将多个选择器存放在数组中$(#btn5).click(function(event){$(span,#two).css('background-color','yellow');});2.1.5*选择器选中所有对象$(#btn4).click(function(event){$(*).css('background-color','black');});2.2标签层级$(“AB”)，获得A元素内部所有的B元素//inputtype=buttonvalue=选择body内的所有div元素.id=btn1/$(#btn1).click(function(event){$(bodydiv).css('background-color','yellow');});$(“AB”)，获得A元素内部的所有子元素B//inputtype=buttonvalue=在body内,选择子元素是div的。id=btn2/$(#btn2).click(function(event){$(bodydiv).css('background-color','green');});$(“A+B”)，获得A元素后面的第一个B元素//inputtype=buttonvalue=选择id为one的下一个div元素.id=btn3/$(#btn3).click(function(event){$(#one+div).css('background-color','red');});$(“A~B”)，获得A元素后面的所有B元素//inputtype=buttonvalue=选择id为two的元素后面的所有div兄弟元素.id=btn4/$(#btn4).click(function(event){$(#two~div).css('background-color','blue');});2.3属性1，[attr]，获得含有指定属性名的元素$(#btn1).click(function(event){$(div[title]).css('background-color','yellow');});2，[attr=value]，获得含有指定属性名等于指定值得元素$(#btn2).click(function(event){$(div[title=test]).css('background-color','yellow');});3，[attr!=value]，与2相反，没有attr属性的元素也将被选中$(#btn3).click(function(event){$(div[title!=test]).css('background-color','yellow');});4，[attr^=value]，获得属性名以value开头的元素，$(#btn4).click(function(event){$(div[title^=te]).css('background-color','yellow');});5，[attr$=value]，获得属性名以value结尾的元素$(#btn5).click(function(event){$(div[title$=est]).css('background-color','yellow');});6，[attr*=value]，获得属性名中含有value的元素$(#btn6).click(function(event){$(div[title*=es]).css('background-color','yellow');});7，[attr1][attr2][attr3]……，多个条件同时成立$(#btn7).click(function(event){$(div[id][title*=es]).css('background-color','yellow');});2.4过滤2.4.1基本选择器过滤2.4.1.1基本内容格式：“:关键字”1，：first，得到$数组的[0]个对象2，：last，得到最后一个对象$(#btn2).click(function(event){$(div:last).css('background-color','yellow');});3，：eq(index)，根据索引得到对象$(#btn6).click(function(event){$(div:eq(3)).css('background-color','yellow');});4，：gt(index)，大于$(#btn7).click(function(event){$(div:gt(3)).css('background-color','yellow');$(#btn1).click(function(event){$(div:first).css('background-color','yellow');});});5，：lt(index)，小于$(#btn8).click(function(event){$(div:lt(3)).css('background-color','yellow');});6，：even，得到$数组索引为偶数的对象，包含0，实际体现为1，3，5$(#btn4).click(function(event){$(div:even).css('background-color','yellow');});7，：odd，得到$数组索引为奇数的对象$(#btn5).click(function(event){$(div:odd).css('background-color','yellow');});8，：not(selecter)，非selecter$(#btn3).click(function(event){$(div:not('.one')).css('background-color','yellow');});2.4.1.2案例对输入框中的文本进行操作htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title03-基本过滤选择器.html/title!--引入jQuery--scriptsrc=../js/jquery-1.8.3.jstype=text/javascript/script/headbodyh3过滤选择器案例/h3br/br/inputtype=textvalue=请输入账号defaultValue=请输入账号/inputtype=textvalue=请输入密码defaultValue=请输入密码/scripttype=text/javascript$(document).ready(function(){$(input).on('blurfocus',function(event){//this为dom对象var$input=$(this);varvalue=$input.attr('defaultValue');if($input.is(':focus')){if($input.val()==$input.attr('defaultValue')){$input.val();}}else{if($input.val().length==0){$input.val(value);}}});});/script/body/html2.4.2内容过滤1.:empty，标签内部是否含有内容$(#btn2).click(function(event){$(div:empty).css('background-color','yellow');});2.:has(…)，是否含有指定的子元素，得到父亲$(#btn3).click(function(event){$(div:has('.mini')).css('background-color','yellow');});3.:parent，是否为父元素，有内容或有标签$(#btn4).click(function(event){$(div:parent).css('background-color','yellow');});4.:contains(…)，是否包含指定内容$(#btn1).click(function(event){$(div:contains('di')).css('background-color','yellow');});2.4.3可见性过滤1，:hidden，隐藏，即style=”display:none”，inputtype=”hidden”$(#b2).click(function(event){$(*:hidden).css('background-color','yellow').show();});$(#b3).click(function(event){//for(vari=$(input:hidden).size()-1;i=0;i--){//alert($(input:hidden)[i].value);//};//$(input:hidden).each(function(index,el){//alert($(this).val());//});$.each($(input:hidden),function(index,val){ale