jQuery知识点

Posted unique1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery知识点相关的知识,希望对你有一定的参考价值。

一.  jQuery基础及选择器

1.补充:
             jQuery是js的类库
         (1)jQuery的设计思想:write less,do more
         (2)jQuery的优势:
                     1》体积小     2》强大的选择器       3》出色的DOM封装 
                     4》可靠的事件处理机制     5》出色的浏览器兼容性
 2.在页面中引入jQuery
   <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
3.ready()方法
   《1》 使用jQuery弹出提示框
    eg:<script>
     $(document).ready(function() {
        alert("我的第一个jQuery示例!");
    });
</script>
   《2》window.onload与$(document).ready()类似,但也区别:
                   window.onload                             $(document).ready()
                 必须等待网页中所有的内容            网页中所有DOM文档结构绘制完毕后即刻执行,可能
执行时机   加载完毕后(包括图片、flash、       与DOM元素关联的内容(图片、flash、视频等)
                 视频等)才能执行                             并没有加载完
 编写个数  同一页面不能同时编写多个             同一个页面能同时编写多个
 简化写法               无                                                     $(function(){ //执行的代码});

4.jQuery语法规则
     (1)工厂函数$():将DOM对象转化为jQuery对象
   (2)选择器selector:获取需要操作的DOM元素
   (3)方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
  语法:$(selector).action();
5.jQuery操作页面元素
    (1)使用addClass()方法为元素添加样式
             语法:jQuery  对象.addClass([样式名]);
              eg:$("tr:odd").addClass("odd");
    (2)使用css()方法设置元素样式
            语法:
           css("属性","属性值");【设置一个css属性】
           css({"属性1":"属性值1","属性2","属性值2"....});【同时设置多个css属性】
           eg:$(this).css({"background":"#c81623"});
    (3)使用show()、hide()方法设置元素的显示和隐藏
              语法:
                        $(selector).show();
                        eg: $(this).children("div").show();
                      $(selector).hide();
                        eg:$(this).children("div").hide();

6.jQuery代码风格
     (1)"$"等同于"jQuery"
               eg:$(document).ready()等同于jQuery(document).ready()
                    $(function(){...})等同于jQuery (function(){...})
     (2)链式操作:对一个对象进行多重操作,并将操作结果返回给该对象
         eg:
               $("h2").css("background-color","#ccffff").next().css("display","block");
      (3)隐式迭代 
              eg:
                      $(document).ready(function() {
                     $("li").css({"font-weight":"bold","color":"red"});
                     });
总结:1)DOM对象:直接使用JavaScript获取节点对象
           2)jQuery对象:使用jQuery包装产生的能够使用jQuery中的方法对象
           3)DOM对象转jQuery对象:使用$(DOM对象)
                eg:var txtName=document.geElement("txtName");
                        var $txtName=$(txtName);
           4)jQuery对象转DOM对象:
                      方法1:通过index的方法得到相应的DOM对象
                      方法2:通过get(index)方法得到相应的DOM对象
7.jQuery选择器分类
    (1)基本选择器
            eg:$("h1").css("color", "blue");   //标签选择器
                    $(".price").css({"background":"#efefef","padding":"5px"});  //类选择器
                    $("#author").css("clor", " #083499");  //id选择器
                    $(".intro,dt,dd").css("color", " #ff0000");  //并集选择器
                    $("*").css("font-weight", "bold");  //全局选择器
    (2)层次选择器
             eg:
                   $(".textRight p").css("color","red");  //后代选择器
                   $(".textRight>p").css("color", "red");  //子选择器
                   $("h1+p").css("text-decoration", "underline");  //相邻元素选择器
                   $("h1~p").css("text-decoration", "underline");   //同辈元素选择器
    (3)属性选择器
             eg:
                     $("#news a[class]").css("background","#c9cbcb");//a标签带有class属性
                     $("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot
                     $("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot
                     $("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头
                     $("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾
                     $("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素
  (4)基本过滤选择器
     :eq(index): 选取索引等于index的元素(index从0开始)

              eg:$("li:eq(1)" )选取索引等于1的<li>元素
     :gt(index) :选取索引大于index的元素(index从0开始)

              eg: $("li:gt(1)" )选取索引大于1的<li>元素(注:大于1,不包括1)
     :lt(index): 选取索引小于index的元素(index从0开始) 

             eg:$("li:lt(1) " )选取索引小于1的<li>元素(注:小于1,不包括1)
     :header :选取所有标题元素,如h1~h6 $(":header" )选取网页中所有标题元素
     :focus 选取当前获取焦点的元素 $(":focus" )选取当前获取焦点的元素
     :animated 选择所有动画 $(":animated" )选取当前所有动画元素
eg:
// 标题元素
$(".contain :header").css({"background":"#2a65ba",…});
// 第一个、最后一个元素
$(".contain li:first").css({"font-size":"16px",…});
$(".contain li:last").css("border","none");
// 偶数、奇数元素
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");
// 小于、大于某个索引值
$(".contain li:lt(2)").css({"color":"#708b02"});
$(".contain li:gt(3)").css({"color":"#b66302"});
8.可见性过滤选择器
     通过元素显示状态来选取元素
        语法                描述                                    示例
       :visible         选取所有可见的元素         $(":visible")选取所有可见的元素
       :hidden        选取所有隐藏的元素         $(":hidden") 选取所有隐藏的元素
        eg:
                  $("p:hidden").show();
                  $("p:visible").hide();

二.jQuery中的事件与动画

1.jQuery事件(jQuery事件使对javascript事件的封装)
   jQuery中事件分类:
           <1>基础事件:(1)鼠标事件
                                   (2)键盘事件
                                    (3)window事件
                                    (4)表单事件
                         
          <2>复合事件:(1)鼠标光标悬停
                                   (2)鼠标连续点击
      2.鼠标事件:       
          click():单击鼠标时
          mouseover():鼠标指针移过时
          mouseout():鼠标指针移出时
          mouseenter():鼠标指针进入时
          mouseleave():鼠标指针离开时
3.鼠标事件方法的区别:
        1》 mouseover()、mouseeter()的区别:
            相同点:鼠标进入被选元素时会触发
            不同点:鼠标在其被选元素的子元素上来回进入时:
                     触发mouseover()         不触发mouseenter()
         2》mouseout()、mouseleave()的区别
               相同点:鼠标离开被选元素时会被触发
               不同点:鼠标在其被选元素的子元素上来回离开时:
                     触发mouseout()、不触发mouseleave()
4.键盘事件(用户每次按下或者释放键盘上的键时都会产生事件)
   常见的键盘事件:
      keydown():按下键盘时
      keyup():释放按键时
      keypress():产生可打印的字符时
5.绑定事件
      (1)绑定事件使用bind()方法
                语法:bind(type,[data],fn);
                        解释:type:事件的类型,主要包括click、mosuover、mouseout等基础事件,还有自定义事件
                                  [data]:可选函数            fn:处理函数
        (2)绑定单个事件
                      eg:
                            $(".on").bind("mouseover",function () {
                                   $(".topDown").show();
                              });
        (3)同时绑定多个事件
                 eg:
                           $(".top-m .on").bind({
    mouseover:function () {
       $(".topDown").show();
    },
    mouseout:function () {
      $(".topDown").hide();
    }
});

6.移除事件
    (1)移除事件使用unbind()方法
           语法:unbind([type],[fn]);
    注意:
               当unbind()不带参数时,表示移除所绑定的全部事件
7.复合事件
       (1)hover():moseover与mouseout事件的组合
            语法:hover(enter,leave);
            eg:$(".top-m .on").hover(function(){
$(".topDown").show();
          },
         function(){
 $(".topDown").hide();
         }
);
       (2)toggle方法:
             1>toggle()方法用于模拟鼠标连续click事件
             语法:toggle(fn1,fn2,....fnN);
               eg:  $("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )
            2>toggle():不带参数时,相当于show()和hide()方法的作用
                 toggleClass()可以对样式进行切换
                   语法:toggle();
                        eg:$("input").click(function () {
                                     $("p").toggle();
                                     })
                   语法:toggleClass(className);
                      eg: $("input").click(function(){$("p").toggleClass("red");})
8.toggle( )和toggleClass( )总结:
(1)toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件
(2)toggle( )不带参数时是实现对象在显示和隐藏状态之间切换
(3)toggleClass( )实现对象在添加样式和移除样式之间切换
9.jQuery动画效果
     1>控制元素显示与隐藏
        show():控制元素的显示   hide():控制元素的隐藏
              语法:$(selector).show([speed],[callback]);
                         eg:  $(".topDown").show(40);
                         $(selector).hide([speed],[callback]);
                        eg:   $(".topDown").hide("fast");
                   解释:[speed]: 可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
                              [callback]:可选。show函数执行完之后,要执行的函数
      2>改变元素的透明度
                fadeIn( )和fadeOut( )可以通过改变元素的透明度实现淡入淡出效果
                        语法:$(selector).fadeIn([speed],[callback]);
                                     eg:   $("img").fadeIn("slow");
                                   $(selector).fadeOut([speed],[callback]);
                                       eg:    $("img").fadeOut(1000);
      3>改变元素高度
              slideDown( )可以使元素逐步延伸显示
              slideUp( )则使元素逐步缩短直至隐藏
                 语法:$(selector).slideUp ([speed],[callback]);
                                eg:$(".txt").slideUp(500,function () {
                                                $(".txt").css("color","pink");
                                               });
                           $(selector).slideDown ([speed],[callback]);
                              eg:    $(".txt").slideDown("normal");
       4>自定义动画
                 语法:$(selector). animate({params},speed,callback);
                       {params:必须定义成动画css属性}
                     eg:$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000).animate({top:  "200px" , width :"200px"}, 3000 ).fadeOut("slow");

10.动画中用法和异同
       (1)show()与hide()
             它们的方法都是用于显示或隐藏页面中的元素
             语法:$(selector).hide(speed,[callback])
                         $(selector).show(speed,[callback]

三.jQuery操作DOM

  一. 1.获取元素
     语法:css(name);
                    eg: $(this).css("color");
      2.追加样式
              语法:$(selector).addClass(class);或者$(selector).addClass(class,class2,classN);
                          eg:$("p").addClass("content  border");
      3.移除样式
               语法:$(selector).removeClass(class);或者$(selector).removeClass(class,class2,classN);
                      eg:$("p").removeClass("content  text");
      4.toggleClass切换样式
                 语法:$(selector),toggleClass(class);
                                eg:$("p").toggleClass("content border");
      5.hasClass()方法判断是否包含有指定样式
              语法:$(selector).hasClass(class);
                         eg:        $("h2").mouseover(function() {
                                           if(!$("p").hasClass("content ")){
                                 $("p").addClass("content ");
                                  }
                                              });

                                $("h2").mouseout(function() {
                                   if($("p").hasClass("content ")) {
                              $("p").removeClass("content ");
                                        }
                                          });
      二.内容操作
               1.html()可以对HTML代码进行操作,相当于js的innerHTML
                     1>获取元素中html代码
                 语法:$("div.left").html();
                        2>设置元素中html代码
                  语法:$("div.left").html("<div class=‘content‘>...</div>");
                             eg:  $("p").html("李小佳,啊哈哈<br>");
                       注意:html()方法可以将标签自动转换为其他不会显示在文本上
               2.text()标签内容操作可以获取或设置元素文本内容
                      1>获取元素文本内容
             语法:$("div.left").text();
                       2>设置元素的文本内容 
                    语法:$("div.left").html("<div class=‘content‘>...</div>");
                               eg:  $("p").text("李小佳,啊哈哈<br>");
                        注意:text()方法只会识别文本,不会将标签转换为其他,会显示出来
             3.html()与text()的区别:
                    html():获取指定标签中的内容(能将标签一起获取)
                    text():获取纯文本内容(不能获取标签)

       三.属性值操作
             1.val():获取或设置元素value属性值
                   1>获取元素值
                     语法:  $(this).val();
                   2>设置元素值
                     语法:$(this).val(value);
                          eg:   $(this).val("电风扇");
       四.节点操作
          1.创建节点元素
      工厂函数$()用于获取或创建节点
             1>$(selector):通过选择器获取节点
             2>$(element):把DOM节点转换成jQuery节点
             3>$(html):使用HTML字符串创建jQuery节点
          eg:
                    var $newNode=$("<li></li>");
                    var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
                    var $newNode2=$("<li title=‘last‘>北京申办冬奥会是再合适不过了!</li>");
         2.插入节点
                  eg: var $newNode1=$("<li>lxj</li>");
                         var $newNode2=$("<li title=‘last‘>lxj1</li>");
                           $("ul").append($newNode1);
                         $("ul").prepend($newNode2);
                       var $newNode3=$("<li>lxj2</li>");
                       var $newNode4=$("<li>lxj3</li>");
                       $("li").after($newNode3);
                       $("li").before($newNode4);
      3.删除节点
                 1>remove():删除整个节点
             语法:$(selector).remove([expr]);
                   eg:$(".gameList li:eq(1)").remove();
                  2>empty():清空节点内容,不会将格式删除
            语法:$(selector).empty();
                   eg:  $(".gameList li:eq(1)").empty();
      4.替换节点
             replaceWith()、replaceAll()用于替换某个节点
            var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");   
     注意:  选择到节点,然后替换我们刚才创建的节点 
            $(".gameList li:eq(2)").replaceWith($newNode1);
     注意:在创建的节点上,替换指定位置
            $ ($newNode1).replaceAll(".gameList li:eq(2)");
     5.复制节点(clone)
          语法:$(selector).clone([includeEvents]);
                  eg:  $(".gameList li:eq(1)").click(function () {
                           $(this).clone(true).appendTo(".gameList");
                             })
               /*如果clone值为true可以在复制的基础上还能再复制
            * 如果为false就可以复制一次*/
                       $(".gameList li:eq(2)").click(function () {
                       $(this).clone(false).appendTo(".gameList");
                               })

     五.属性操作
     1.attr()用来获取与设置元素属性
           语法:
                     $(selector).attr([name]) ;
                           或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
                eg:  $(".contain img").attr({width:"200",height:"80"});
      2.删除元素属性(removeAttr)
                语法:$(selector).removeAttr(name) ;
                      eg:  $(".contain img").removeAttr("alt");
     六.节点遍历
          1.children()方法遍历所有子元素
        语法:$(selector).children([expr]);
                eg:  var $section=$("section").children();
                      alert($section.length);
         2.遍历同辈元素
               (1)next():获取相邻元素之后的元素
                      eg:$("li:eq(1)").next().addClass("orange");
              (2)prev():获取相邻元素之前的元素
                     eg:$("li:eq(1)").prev().addClass("orange");
              (3)slibings():获取元素前面和后面的所有同辈元素
                      eg:$("li:eq(1)").siblings().addClass("orange");
        3.遍历前辈元素
                   parent():获取父级元素
                       eg:$("li:eq(1)").parent().addClass("orange");
                    parents():获取祖先元素
                         eg:$("li:eq(1)").parents().addClass("orange");
          4.其它遍历方法
                  each():规定为每个匹配元素规定运行的函数
                语法:$(selector).each(function(index,element));
                     eg:  $("img").click(function () {
                            $("li").each(function () {
                            var str=$(this).text()+"<br>";
                            $("section").append(str);
                                 })
                            })
                   end():结束当前链条中最近的筛选操作,将匹配元素集还原为之前的状态
                       eg:
                             $(".contain :header").css({"background":"#2a65ba","color":"blue"});
                             $(".gameList li").first().css("background","yellow").end().last().css("background","red");
                            $(".gameList li:last").css("border","none");
               注意:想要在first方法后用last实现必须使用end方法将结果集返回第一个元素在进行操作

四.表单的验证及正则表达式

       一.表单验证
  1.表单验证的好处:
   减轻服务器的压力        保证输入的数据符合要求
2.常用的表单验证:
  日期格式
  元素是否为空
  用户名和密码
  E-mail地址
  身份证号
   二.验证表单内容
   1.用String对象验证邮箱
         eg:
         $("form").submit(function(){
  var mail = $("#myform :text").val();
if (mail=="") {  //检测Email是否为空
alert("Email不能为空");
return false;
}
      indexOf():查找某个指定字符串在首次出现的位置
if (mail.indexOf("@") == -1) {
alert("Email格式不正确 必须包含@");
return false;
}
if (mail.indexOf(".") == -1) {
alert("Email格式不正确 必须包含.");
return false;
}
return true;
})

2.文本框内容验证
      (1).length长度验证
          eg:if(pwd.length<6){
                 alert("密码必须等于或大于6个字符");
                 return false;
               }
         (2)判断字符串是否有数字
                 使用for循环和substring方法依次截取单个字符,再判断每个字符是否是数字
                     eg:
                             for (var i = 0; i < user.length; i++) {
                              var j = user.substring(i, i + 1);
                              if (isNaN(j) == false) {
                              alert("姓名中不能包含数字");
                               return false;
                             }
                     }

   三.表单验证的事件和方法
 事件:
        (1)onblur:失去焦点,当光标离开某个文本框时触发
        (2)onfocus:获得焦点,当光标进入某个文本框时触发
 方法:
        (1)blur():从文本域中移开焦点
        (2)focus():再文本域中设置焦点,获得光标
        (3)select():选取文本域中的内容,突出显示输入区域的内容

   四.校验提示特效
      eg:if (!checkPass()) flag=false;
            if (!checkRePass()) flag=false;
   五.文本框输入提示特效
    eg:$("#repwd").blur(checkRePass);
         $("#user").blur(checkUser);
  六.正则表达式
  1.为什么需要正则表达式?
      简洁的代码
      严谨的验证文本框中的内容
      生产环境中更为常用的方式
2.定义正则表达式
   1》普通方式
       语法:var  reg=/表达式/附加参数;
           eg:var  reg=white/g;
   2》构造函数
         语法:var  reg=new RegExp("表达式","附加参数");
               eg:var reg=new RegExp("white","g");
3.表达式的模式
      1》简单模式(只能表示具体的匹配)
         eg:var reg=/china/
      2》符合模式(可以使用通配符表达更为抽象的规则模式)
            eg:var reg=/^w+@w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
4.RegExp对象
       1》方法
     exec():检索字符中是正则表达式的匹配,返回找到的值,并确定其位置
     test():检索字符串中指定的位置,返回true或fasle
       2》属性
   global:RegExp对象是否具有标志g,表示全局匹配
   ignoreCase:RegExp对象是否具有标志i,表示不区分大小写
   multiline:RegExp对象是否具有标志m,表示多行匹配
5.String对象
    match():找到一个或多个正则表达式的匹配
    search():检索与正则表达式相匹配的值
    replace():替换与正则表达式匹配的字符串
    split():把字符串分割位字符串数组
6.正则表达式符号
  /..../:代表一个模式的开始和结束
 ^:字符串的开始         $:字符串的结束     s:任何空白字符    S:任何非空白字符
d:匹配一个数字字符,等价于[0-9]
D:除了数字之外的任何字符,等价于[^0-9]
w:匹配一个数字,下划线或字母字符,等价于[A-Za-z0-9]
W:任何非单字字符,等价于[^a-zA-z0-9]
.:除了换行符之外的任意字符
{n}:匹配前一项n次
{n,}:匹配前一项n次,或者多次
{n,m}:匹配前一项至少n次,但是不能超过m次
*:匹配前一项0次或多次,等价于{0,}
+:匹配前一项1次或多次,等价于{1,}
?:匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}

   七.HTML5方式验证表单
   1.HTML5新增验证属性
     placeholder:提供一种提示(hint),输入域为空时显示,获得焦点输入内容后消失
     required:规定输入域不能为空
     pattern:规定验证input域的模式(正则表达式)
         eg:<input type="text" id="uName" 
            placeholder="英文、数字长度为6-10个字符" 
            required pattern="[a-zA-Z0-9]{6,10}"  />
            <input type="password" id="pwd" 
            placeholder="长度为6-16个字符" 
            required pattern="[a-zA-Z0-9]{6,16}"/>
2.validityState对象的validity属性:
stepMismatch:输入的值不符合step特性所推算出的规则
     例如:范围从0到10,step特性值为2,因为合法值为该范围内的偶数,其它数值均无法通过
stepMismatch:使用自定义的验证错误提示信息,使用setCustomValidity()方法自定义错误提示信息
tooLong:输入的内容超过了表单元素的maxlength特定限定字符的长度
rangUnderflow:输入的值小于min特性的值
    例如:如果输入的数值小于最小值,则返回true,否则返回fasle
rangeOverflow:输入的值大于max特性的值
valueMissing:表单元素设置了required特性,则为必填项
typeMismatch:输入值与type类型不匹配
patternMismatch:输入值与pattern特性的正则表达式不匹配

以上是关于jQuery知识点的主要内容,如果未能解决你的问题,请参考以下文章

jQuery知识点考前复习总结(详细)

JQuery知识点

jQuery知识点整合

史上最全 jQuery 知识点小结(下)

jQuery入门基础知识点汇总

史上最全 jQuery 知识点小结(上)