JavaWeb--快速入门jQuery(三)

简介: JavaWeb--快速入门jQuery(三)
+关注继续查看

表单对象属性过滤器



:enabled 匹配所有可用元素


:disabled 匹配所有不可用元素


:checked 匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象


:selected 匹配所有选中的 option


$("#btn1").click(function(){
   // val()可以操作表单项的value属性值
   // 它可以设置和获取
   $(":text:enabled").val("我是万能的程序员");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
   $(":text:disabled").val("管你可用不可用,反正我是万能的程序员");
});
//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
   alert( $(":checkbox:checked").length );//checkbox复选框的意思,checked是选中的意思
});
//4.获取多选框,每个选中的value值
$("#btn4").click(function(){
   // 获取全部选中的复选框标签对象
   var $checkboies = $(":checkbox:checked");
   // 老式遍历
   // for (var i = 0; i < $checkboies.length; i++){
   //     alert( $checkboies[i].value );
   // }
   // each方法是jQuery对象提供用来遍历元素的方法
   // 在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象
   $checkboies.each(function (){
      alert(this.value);
   })
});
//5.获取下拉框选中的内容  
$("#btn5").click(function(){
   // 获取选中的option标签对象
   var $options = $("select option:selected");
   // 遍历,获取option标签中的文本内容
   $options.each(function () {
      // 在each遍历的function函数中,有一个this对象。这个this对象是当前正在遍历到的dom对象
      alert(this.innerHTML);
   });
});

image.png


六、jQuery 元素筛选



eq() 获取给定索引的元素 功能跟 :eq() 一样


first() 获取第一个元素 功能跟 :first 一样


last() 获取最后一个元素 功能跟 :last 一样


filter(exp) 留下匹配的元素


is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回,true


has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样


not(exp) 删除匹配选择器的元素 功能跟 :not 一样


children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样


find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样


next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样


nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样


nextUntil() 返回当前元素到指定匹配的元素为止的后面元素


parent() 返回父元素


prev(exp) 返回当前元素的上一个兄弟元素


prevAll() 返回当前元素前面所有的兄弟元素


prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素


siblings(exp) 返回所有兄弟元素


add() 把 add 匹配的选择器的元素添加到当前 jquery 对象


<script type="text/javascript">
      $(document).ready(function(){
         function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
         }
         anmateIt();
       
/**
           
过滤
eq(index|-index)         
first()                
last()                    
hasClass(class)          
filter(expr|obj|ele|fn)    
is(expr|obj|ele|fn)1.6*    
has(expr|ele)           
not(expr|ele|fn)         
slice(start,[end])           
查找
children([expr])         
closest(expr,[con]|obj|ele)1.6*   
find(expr|obj|ele)              
next([expr])               
nextall([expr])             
nextUntil([exp|ele][,fil])1.6*     
parent([expr])                 
parents([expr])             
parentsUntil([exp|ele][,fil])1.6*  
prev([expr])               
prevall([expr])             
prevUntil([exp|ele][,fil])1.6*     
siblings([expr])            
串联
add(expr|ele|html|obj[,con])   
                 
*/
       
         //(1)eq()  选择索引值为等于 3 的 div 元素
         $("#btn1").click(function(){
            $("div").eq(3).css("background-color","#bfa");
         });
         //(2)first()选择第一个 div 元素
          $("#btn2").click(function(){
             //first()   选取第一个元素
            $("div").first().css("background-color","#bfa");
         });
         //(3)last()选择最后一个 div 元素
         $("#btn3").click(function(){
            //last()  选取最后一个元素
            $("div").last().css("background-color","#bfa");
         });
         //(4)filter()在div中选择索引为偶数的
         $("#btn4").click(function(){
            //filter()  过滤   传入的是选择器字符串
            $("div").filter(":even").css("background-color","#bfa");
         });
          //(5)is()判断#one是否为:empty或:parent
         //is用来检测jq对象是否符合指定的选择器
         $("#btn5").click(function(){
            alert( $("#one").is(":empty") );
         });
       
         //(6)has()选择div中包含.mini的
         $("#btn6").click(function(){
            //has(selector)  选择器字符串    是否包含selector
            $("div").has(".mini").css("background-color","#bfa");
         });
         //(7)not()选择div中class不为one的
         $("#btn7").click(function(){
            //not(selector)  选择不是selector的元素
            $("div").not('.one').css("background-color","#bfa");
         });
         //(8)children()在body中选择所有class为one的div子元素
         $("#btn8").click(function(){
            //children()  选出所有的子元素
            $("body").children("div.one").css("background-color","#bfa");
         });
       
       
         //(9)find()在body中选择所有class为mini的div元素
         $("#btn9").click(function(){
            //find()  选出所有的后代元素
            $("body").find("div.mini").css("background-color","#bfa");
         });
         //(10)next() #one的下一个div
         $("#btn10").click(function(){
            //next()  选择下一个兄弟元素
            $("#one").next("div").css("background-color","#bfa");
         });
         //(11)nextAll() #one后面所有的span元素
         $("#btn11").click(function(){
            //nextAll()   选出后面所有的元素
            $("#one").nextAll("span").css("background-color","#bfa");
         });
         //(12)nextUntil() #one和span之间的元素
         $("#btn12").click(function(){
            //
            $("#one").nextUntil("span").css("background-color","#bfa")
         });
         //(13)parent() .mini的父元素
         $("#btn13").click(function(){
            $(".mini").parent().css("background-color","#bfa");
         });
         //(14)prev() #two的上一个div
         $("#btn14").click(function(){
            //prev()  
            $("#two").prev("div").css("background-color","#bfa")
         });
         //(15)prevAll() span前面所有的div
         $("#btn15").click(function(){
            //prevAll()   选出前面所有的元素
            $("span").prevAll("div").css("background-color","#bfa")
         });
         //(16)prevUntil() span向前直到#one的元素
         $("#btn16").click(function(){
            //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
            $("span").prevUntil("#one").css("background-color","#bfa")
         });
         //(17)siblings() #two的所有兄弟元素
         $("#btn17").click(function(){
            //siblings()    找到所有的兄弟元素,包括前面的和后面的
            $("#two").siblings().css("background-color","#bfa")
         });
       
       
         //(18)add()选择所有的 span 元素和id为two的元素
         $("#btn18").click(function(){
            //   $("span,#two,.mini,#one")
            $("span").add("#two").add("#one").css("background-color","#bfa");
           
         });
      });
     
     
   </script>


相关文章
|
6月前
|
设计模式 JavaScript 前端开发
|
7月前
|
JavaScript 前端开发 API
JavaWeb快速入门--jQuery
JavaWeb快速入门--jQuery
43 0
|
JavaScript 前端开发 数据安全/隐私保护
JavaWeb--快速入门jQuery(二)
JavaWeb--快速入门jQuery(二)
114 0
JavaWeb--快速入门jQuery(二)
|
JavaScript 前端开发 API
JavaWeb--快速入门jQuery(一)
JavaWeb--快速入门jQuery(一)
105 0
JavaWeb--快速入门jQuery(一)
|
XML 缓存 前端开发
|
JavaScript 前端开发 数据格式
|
JavaScript 前端开发 程序员
Datatables快速入门开发--一款好用的JQuery表格插件
  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅.
2758 0
相关产品
云迁移中心
推荐文章
更多