Jquery基础

Posted 2020-09-23 柳姑娘

简介：

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() 加margin
4.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(){};
   })