JQuery

jQuery的引入

在需要使用jQueryhtml中使用js的引入方式进行引入,如下:

<script type="text/javascript" src="jquery-x.x.x.js></script>

JQuery对象与js对象之间的转换

jsDOM对象转换成jQuery对象语法:

$(js对象)

jQuery对象转换成js对象,语法

jquery对象[索引] jquery对象.get(索引)

jQuery页面加载事件

onload=function(){

       //jq方式加载页面

       //通过js方式打印div内部的内容

       var divEle = document.getElementById("myDiv");

       alert(divEle.innerHTML);

  } 

$(function(){

       //通过jq方式加载页面

});

JQuery选择器

基本选择器

选择器名称              语法                    解释

标签(元素)选择器   $("html标签名")     获得所有匹配标签名称的于元素    

id选择器          $("#id的属性值")      获得与指定id属性值匹配的元素   

类选择器         $(".class的属性值")     获得与指定的class属性值匹配的元素

层级选择器

 选择器名称    语法                 解释           

  后代选择器        $("A  B ")          选择A元素内部的所有B元素

  子选择器       $("A > B")      选择A元素内部的所有B子元素

属性选择器

选择器名称                语法                    解释            

  属性选择器           $("A[属性名]")             包含指定属性的选择器    

  属性选择器           $("A[属性名=]")         包含指定属性等于指定值的选择器

  复合属性选择器         $("A[属性名=]… …") 包含多个属性条件的选择器  

基本过滤选择器

选择器名称           语法                     解释            

  首元素选择器   :first             获得选择的元素中的第一个元素

  尾元素选择器   :last                 获得选择的元素中的最后一个元素

  非元素选择器   :not(selecter)     不包括指定内容的元素    

  偶数选择器      :even               偶数,从 0 开始计数   

  奇数选择器      :odd               奇数,从 0 开始计数   

  等于索引选择器        :eq(index)            指定索引元素        

  大于索引选择器        :gt(index)     大于指定索引元素      

  小于索引选择器        :lt(index)      小于指定索引元素      

  标题选择器      :header             获得标题元素,固定写法   

表单属性选择器

选择器名称              语法         解释          

  可用元素选择器        :enabled          获得可用元素      

  不可用元素选择器    :disabled     获得不可用元素     

  选中选择器         :checked          获得单选/复选框选中的元素

  选中选择器         :selected     获得下拉框选中的元素  

jQueryDOM操作

jQuery对DOM树中的文本和值进行操作

语法

  API方法              解释               

  val([value])          获得/设置元素value属性相应的值

  text([value])    获得/设置元素的文本内容     

  html([value])       获得/设置元素的标签体内容  

jQuery对DOM树中的属性进行操作

  API方法                 解释                        

  attr(name[,value])      获得/设置属性的值                 

  prop(name[,value])     获得/设置属性的值(checkedselected)

attrprop的注意问题

attrprop是以1.6为界限

checked selected 使用prop获取

其他使用attr获取 获取不到换成prop

JQuery对class进行操作

6_3_1_语法

API方法                     解释                                     

css(name[,value])       获取/设置指定的CSS样式

addClass(value)       

addClass(类样式名)给指定的对象添加新的类样式,指定类样式名字 

removeClass(value)

removeClass(类样式名) 删除指定的类样式

toggleClass(value)

toggleClass(类样式名)切换样式,如果没有类样式,

则添加,如果有类样式,则删除

jQuery创建插入对象

  API方法                   解释                 

  $("<A></A>")           创建A元素对象            

  append(element)       添加成最后一个子元素,两者之间是父子关系

  prepend(element)       添加成第一个子元素,两者之间是父子关系

  before(element)         添加到当前元素的前面,两者之间是兄弟关系

  after(element)       添加到当前元素的后面,两者之间是兄弟关系

jQuery删除对象

  API方法      解释         

  remove()     删除指定元素     

  empty()      清空指定元素的所有子元素


1_JQuery动画

1_1_显示效果

  $dm.show();

  $dm.hide();

  $dm.show("slow/normal/fast");

  $dm.show(3000);

  $dm.show(3000,function(){

     //……

  });

1_2_滑动效果

  $dm.slideUp();

  $dm.slideDown("slow/normal/fast");

  $dm.slideDown(3000);

  $dm.slideDown(3000,function(){

    //…..

  });

1_3_淡入淡出效果

  $dm.fadeInt();

  $dm.fadeOut();

  $dm.fadeToggle();

  $dm.fadeToggle("normal/slow/fast");

  $dm.fadeToggle(3000);

  $dm.fadeToggle(3000,function(){

    //…..

  });

2_JQuery遍历

2_1_原始方式遍历

  var objs=document.getElementsByTagName("li");

  for(var i=0;i<objs.length;i++){

      objs[i]

  } 

  var $lis=$("li");

  for(var i=0;i<$lis.length;i++){

     $lis[i]

  }

  注意:如何区分是JS对象还是JQ对象 console.log(obj); 

  //控制台观察到obj携带jq信息,jq对象

  //控制台观察到obj没有jq信息,js对象

2_2_JQuery对象方法遍历

  $("li").each(function(index,obj){});

  $("li").each(function(index,obj){

     console.log(index);//下标

console.log(obj);//正在遍历对象

  });

2_3_JQuery的全局方法遍历

   $.each($("li"),function(index,obj){

console.log(index);

console.log(obj);

   });

2_4_JQuery3.0新特性for_of语句遍历

   for(var obj of $("li)){

     console.log(obj); 

   }

3_JQuery的事件绑定和解绑

3_1_on绑定事件

  $("#dv").on("事件名称",function(){

     //…..

  });

  $("#dv").on({

      "事件名称":function(){

       //…..

      },

  "事件名称":function(){

       //…..

      }

  });

3_2_off解绑事件

   $dm.off()

   $dm.off("click")

3_3_事件切换

   $dm.click(function(){//…..})

   $dm.mouseover(function(){}).mouseout(function(){});

   $dm.hover(function(){//…},function(){//….});

4_1广告的自动显示和隐藏

   $(function(){

    setTimtout(function(){    

   $dm.slidedown(3000,function(){    

      setTimeout(function(){     

$dm.slideUp();  

  },3000);   

   });  

},5000);

});

5_JQuery的插件

表单校验插件validator

1_导入插件文件

  导入3个文件 jquery   vliadate核心  国际化语言文件

2_使用方式

  $("#fomrId").validate({

     //存放校验规则

     rules:{

   username:{

   required:true,

   minLength:5,

   maxLength:10    

}

},

//存放提示消息

messages:{

    username:{

   required:"用户名必须录入"

   minLength:"用户名至少5位"

   maxLength:"用户名多0位"

}

}

  });

  $.validator.addMethod("规则名称",function(value,element,params){

      //value:用户录入的表单数据

  //element:正在校验的表单元素

  //params:代表参数 

  });

补充:在哪里找API

HTML标签: 

  h5之前: w3cschool__>html 

  h5:  w3cschool菜鸟__>html5

CSS:  

  CSS2: w3cschool__>CSS

  CSS3:w3cschool菜鸟__>CSS3

JavaScript: (自身语法/BOM/DOM)

   语言自身内容,js语言内置API  W3CSCHOOL___>JavaScript

HTMLDOM: 

   什么是DOM,浏览器识别HTML页面之后,将页面中的各个元素加载为一颗DOM树 

   document.getElementById(""); 获取到DOM树上的各个节点

   W3CSCHOOL___>htmlDOM

  document.getElementById("formId").submit();

  document.getElementById("checkBoxId").checked=true/false;

BOM: (5)

   W3CSCHOOL___>htmlDOM__>browser 对象

对节点的CRUD(增删改查) 

  W3CSCHOOL___>XMLDOM

   HTML是一个XML文件

JavaScript对标签样式操作(新的一套API)

   W3CSCHOOL___>htmlDOM___>DOMSTYLE   

   document.getElementById("dv").style.XX;

发表评论