Jquery基础（二）

简介：

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

Jquery的语法与js和css的区别与联系：

1.选择器

css选择器：   基本选择器：*  # . p   组合选择器：p,h    p h   p+h   p>h   属性选择器：[class=‘aaa‘]     div[id]

js中DOM节点查找： 直接查找                  导航属性查找   6种                          children                          parentElement                          firstElementChild                          lastElementChild                          nextElementSibling                          previousElementSiling

jquery   选择器：     基本选择器     层级选择器     属性选择器         表单选择器

   筛选器：     $(‘li:eq(2)‘)     过滤筛选器：$(‘li‘).eq(2)     查找筛选器：children  find                 next  nextall nextUntill                 prev  prevAll prevUntill                 parent  parents  parentUntil                 siblings

2.文本节点（文档操作）JS和Jquery节点操作比较JS：createElement    appendChind    insertBefore    removeChind    replaceChild

Jquery文档操作：    append  prepend       父节点添加子节点    appendTo  prependTo     子节点添加到父节点

    after   before         兄弟标签添加    insertAfter   insertBefore

    replaceWith        替换    empty     清空标签内容    remove     删除标签    clone      克隆一个新的标签

3.属性操作

   js节点属性操作：      arribute属性：  setAttribute(name,value)                      getAttribute(name)                      removeAttribute()      class属性：                 node.className                 node.classList.add()                 node.classList.remove()      node节点的值：innerText                    innerHTML      css属性:             node.style.color      创建一个标签：$(‘<p>‘)

jquery属性：      固有属性: prop()  removeProp()      自定义属性:attr()   removeAttr()      class属性：              addClass()              removeClass()      node节点的值：                  html()                  text()                  val()    针对固有属性      css属性：              $().css(‘color‘,‘red‘)              位置：  $().offset({left:0,top:0})  偏移量                      $().position()                      $().scrollTop()                      $().scrollLeft()              尺寸：$().height()   内容高度                    $().width()    内容宽度                    $().innerHeight() 加padding                    $().innerWidth()                    $().outerHeight() 加边框                    $().outerWidth()                    $().outerHeight() 加margin4.Jquery其他jquery动画效果：show  hide  toggle                slideDown   slideUp   slideToggle                fadeDown    fadeUp    fadeToggle                回调函数jquery循环：$.each（obj,fn）     方式一： 遍历数组或字典              $.each(array,function(i,j){})       i:索引  j：元素值              $.each({key:value},function(i,j){})  i: key      j:value

     方式二： 遍历节点对象              $(‘elector‘).each(function(){                     $(this)})5.事件绑定JS事件绑定方式一：         <p onclick=func(this)>ppppp</p>         function func(self){          self                               self:当前操作标签     DOM对象          $(self)}                           $(self):当前操作标签      Jquery对象

事件绑定方式二：      var ele=document.getElementByid(‘‘)      ele.onclick=function(){        this                                    this:当前操作标签     DOM对象        $(this) }                               this:当前操作标签      Jquery对象

this在全局，代指window对象

Jquery事件绑定方式：       $.bind(‘click‘,function(){})       $(‘‘).click(function(){            $(this)})       $(‘‘).on(‘click‘,[selector],function(){})

Jquery事件：         页面加载: $(document).ready         事件处理：on   off         事件切换：hover（func1,func2）         事件：blur               change               click               dblclick               focus               keydown               keyup               keypress               mouseover               mouseout               mouseleave               mouseenter               scroll               select               submit               unload

6.扩展方法：插件   1 $.extend({     name: function(){};     })   2 $.fn.extend({     name: function(){};   })