AI智能
改变未来

jQuery框架小结


jQuery中各种选择器
基本选择器:

                     $(\”#id/.class/tag\”)

                      元素选择器:JQuery元素选择器基于元素名选取元素
                      id选择器:id选择器通过HTML元素的id属性选取指定的元素
                      class选择器:类选择器可以通过指定的class查找元素

层次选择器:

                      $(\”#div1\”).parent();   
                                    .parents();                      
                                    .children();  

                      ancestor descendant 匹配所以后代元素
                      parent>child 匹配所有子元素
                      pre+next  prev元素后的相邻元素
                      prev~siblings 元素后的所有兄弟元素

过滤选择器:简单过滤选择器

                      $(\”div:first/last/eq(索引)/even/odd\”);

                          :first  获取第一个元素
                          :last  获取最后一个元素
                          :even  获取索引值为偶数的元素  索引号从0开始
                          :odd 获取索引值为奇数的元素  索引号从0开始

属性过滤选择器:  

                      $(\”[href]\”);      $(\”[href=\’demo1.html\’]\”)
                                                        !=  属性值不是
                                                       ^=\”http://\”   以http://开头的属性值的标签
                                                       $=      结尾 
                                                       *=      包含

                                   [attribute] 获取包含给定属性的元素
                                   [attribute=value] 获取等于给定的属性是某个特定值的元素
                                   [attribute!=value]  获取不等于给定的属性是某个特定值的元素
                                   [attribute^=value] 获取给定的属性是以某些值开始的元素
                                   [attribute$=value] 获取给定的属性是以某些值结束的元素
                                   [attribute*=value] 获取给定的属性是包含某些值的元素

可见性选择器:  

                                $(\”.divClass:hidden/visible\”);

                                :hidden  获取所有不可见元素 /type=hidden的元素
                                 :visible  获取所有的可见元素

表单选择器    

                       $(\”#loginForm:input\”);

                       :input  获取所有input textarea  select和button元素
                       :text  选择所有单行文本框  即type=text的元素
                       :password  选择所有密码框  type=password
                       :radio  选择所有单选框  type=radio
                       :checkbox  选择所有复选框   type=checkbox
                       :enbaled  获取所有可用元素
                       :disable  获取所有不可用元素
                       :checked  选取单选、复选框中被选中的元素
                       :selected  选择下拉列表中被选中的元素

操作通过选择器获取到的标签/元素—赋值、取值操作

     a、非表单标签
           jq对象.text(\”值\”);    赋值的是HTML标签,不被解析,赋值内容原样显示
                     .html(\”值\”); 赋值的内容是HTML标签,会被浏览器解析
           var geValue=jq对象.text();
     b、表单标签
          jq对象的表单标签.val(\”所赋值\”);
         var getInput=jq对象.val();

操作—创建标签、添加标签、删除标签

     创建: var tr=$(\”<tr></tr>\”);
     添加: var table=$(\”#tableGoods\”);
                table.append(tr);   追加到父标签中的子标签列表的后面
                $(\”#tableGoods tr:eq(3)\”).before(tr)   现有第4行之前
                                                          after(tr)     现有第4行之后
                子标签.appendto(父标签);
                tr.appendto(\”#tableGoods\”);
                父标签.preappend(子标签);   追加到子标签的前面
      删除: jq对象.remove();    jq对象自身及子标签都删除
                 jq对象.empty();   删除jq对象的子标签,jq对象还在

 链式语法

     a、jq对象.css(\”属性\”,\”属性值\”).css();
     b、jq对象.addClass(\”类选择器名,类选择器名\”);
     删除样式  jq对象.removeClass(\”类选择器\”);

jQuery遍历

   .parent()   返回被选元素的直接父元素

  .children()  返回被选元素的所有直接子元素

  .siblings()  返回被选元素的所有同胞元素

  .first() 返回被选元素的首个元素

  .last()  返回被选元素的最后元素

 

jQuery实现AJAX效果

     对原生JavaScript使用AJAX的封装。
     3个函数实现AJAX

[code] $.get(\"url\",funcation(){    //回调函数      });    $.post(\"url\",data,function(){    });   $.ajax({        url:\"login\",        method:\"post/get\",        dataType:\"JSON\",        data:v_dataa,        success:function(jsonObj){            //解析参数jsonObj即可        },        failed:function(){        }   });

$(function(){}) 和window.οnlοad=function(){}; 的区别?

     a、加载的时间不同
     b、window.onload 只能被调用一次    $(function(){})可以调用多次

(需要jar包的可以私信)

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery框架小结