jQuery基础使用

jQuery 是一个 JavaScript 库,在原生JavaScript 上进行了一层封装,极大地简化了 JavaScript 编程。

jQuery下载:<https://jquery.com/download/&gt;

    &lt;!-- 引入jquery --&gt;
    &lt;script old-src=&quot;./jquery-3.4.1.min.js&quot;&gt;&lt;/script&gt;

一、jQuery核心方法

1.jQuery核心方法:jQuery( );等同于:$( )

这个方法可以得到一个jQuery对象,而要使用jQuery,首先要得到的就是一个jQuery对象。

      // 通过选择器获取jquery对象
      $(&quot;#id&quot;)
      // 标签对象转换为jquery对象
      $(document.body)
      // 数组对象转换为jquery对象
      $([1,2,3])
      // html标签转化为jquery对象
      $(&quot;&lt;p&gt;&lt;/p&gt;&quot;)
      // $(document).ready()的缩写形式,表示DOM文档加载完毕执行回调,比window.onload(DOM和所有文件加载完毕时执行)先执行
      $(function(){})

将jQuery对象转换回原生对象

      // 将jquery对象转换为原生对象
      $(&quot;#id&quot;).get(0)
      $(&quot;#id&quot;)[0]

2.each方法

循环jQuery对象的方法

      $(&quot;#id&gt;p&quot;).each(function(i){
          console.log($(this),i)
      })

和forEach类似,这里遍历出的this是原生对象,如果需要使用jQuery方法需要在外层包裹一个$(),该方法遍历数组时需要将数组转化为jQuery对象

二、jQuery选择器常用方法

        $('ul li:first').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中第一个
        $('ul li:last').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中最后一个
        $('ul li:even').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中所有奇数个
        $('ul li:odd').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中所有偶数个
        $('ul li:eq(1)').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中下标,第某个
        $('ul li:gt(1)').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中下标,某个之后的全部
        $('ul li:lt(1)').html('&lt;li&gt;12345&lt;/li&gt;')  // 选中下标,某个之前的全部

三、jQuery常用筛选方法

        $('ul li').first().html('&lt;li&gt;12345&lt;/li&gt;')  // 第一个
        $('ul li').last().html('&lt;li&gt;12345&lt;/li&gt;')  // 最后一个
        $('ul li').eq(1).html('&lt;li&gt;12345&lt;/li&gt;')  // 选中下标,第某个,得到jQuery对象;.get()得到原生对象
        $('ul li').not('.class').html('&lt;li&gt;12345&lt;/li&gt;')  // 选择类名为&quot;class&quot;元素之外的所有元素
        $('ul li').hasClass('class') // 返回一个布尔值,判断是否存在class=&quot;class&quot;
        $(&quot;ul&quot;).children(&quot;.class&quot;).css(&quot;color&quot;, &quot;blue&quot;);  // 遍历ul,选择类名为&quot;class&quot;的所有子元素
        $(&quot;.class&quot;).next().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素后面的一个元素
        $(&quot;.class&quot;).nextAll().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素后面的所有元素
        $(&quot;.class&quot;).prev().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素前面的一个元素
        $(&quot;.class&quot;).prevAll().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素前面的所有元素
        $(&quot;.class&quot;).parent().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素的直接父元素
        $(&quot;.class&quot;).parents().css(&quot;color&quot;, &quot;blue&quot;);  // 选择类名为&quot;class&quot;元素的所有父元素

四、jQuery操作属性的常用方法

   // attr和prop用法相同,attr用于普通属性,prop用于值为false、true的属性(类似disabled、checked等)
        $('ul li').attr(&quot;title&quot;,&quot;这是一个li&quot;) // 添加属性
        $('ul li').attr({&quot;title&quot;:&quot;这是一个li&quot;,&quot;class&quot;:&quot;li&quot;}) // 添加多个属性
        $('ul li').removeAttr(&quot;title&quot;) // 移除一个属性
        $(':checkbox').prop(&quot;checked&quot;) // 获取复选框选中状态

html、text、val是jQuery三个非常重要的方法,与原生JS中的innerHTML、innerText、value对应

      let root = document.getElementById(&quot;root&quot;);
      // 修改html
      root.innerHTML = &quot;&lt;li&gt;12345&lt;/li&gt;&quot;;
      $(&quot;#root&quot;).html(&quot;&lt;li&gt;54321&lt;/li&gt;&quot;);
      // 修改文本text
      root.innerText = &quot;12345&quot;;
      $(&quot;#root&quot;).text(&quot;54321&quot;);
      // 获取文本text
      console.log(root.innerText,&quot;-----&gt;&quot;)
      console.log( $(&quot;#root&quot;).text(),&quot;-----&gt;&quot;)
      // 返回或设置被选元素的 value 属性,比如&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;
      root.value = &quot;12345&quot;;
      $(&quot;#root&quot;).text(&quot;54321&quot;);

五、操作CSS

      // 获取样式
      console.log($(&quot;#root&quot;).css(&quot;color&quot;))
      // 设置样式
      $(&quot;#root&quot;).css(&quot;color&quot;, &quot;red&quot;)
      // 设置多个样式
      $(&quot;#root&quot;).css({color:&quot;red&quot;,fontSize:100})
      // 获取节点距离当前视口(当前页面可见区域)的位置
      console.log($(&quot;#root&quot;).offset())  // {top: 44, left: 48}
      // 获取节点距离偏移父集的位置,具体查看API
      console.log($(&quot;#root&quot;).position())  // {top: 44, left: 48}

六、jQuery操作节点

      // 给id=&quot;root&quot;末尾添加一个子节点
      $(&quot;#root&quot;).append(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;)
      $(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;).appendTo(&quot;#root&quot;)
      // 给id=&quot;root&quot;添加一个子节点在最前
      $(&quot;#root&quot;).prepend(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;)
      $(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;).prependTo(&quot;#root&quot;)
      // 在id=&quot;root&quot;后追加一个节点
      $(&quot;#root&quot;).after(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;)
      // 在id=&quot;root&quot;前追加一个节点
      $(&quot;#root&quot;).before(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;)
      // 将#root移至.class后
      $(&quot;#root&quot;).insertAfter(&quot;.class&quot;)
      // 将.class移至#root前
      $(&quot;.class&quot;).insertBefore(&quot;#root&quot;)

替换和删除节点:

      // 替换节点
      $(&quot;#root&quot;).replaceWith(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;)
      $(&quot;&lt;p&gt;12345&lt;/p&gt;&quot;).replaceAll(&quot;#root&quot;)
      // 删除节点中的内容,节点还存在
      $(&quot;#root&quot;).empty()
      // 删除节点及数据和事件
      $(&quot;#root&quot;).remove()
      // 删除节点,保留数据和事件
      $(&quot;#root&quot;).detach()

七、jQuery绑定事件

1.on和off

      // on集成所有事件功能,推荐
      $(&quot;#root&quot;).on(&quot;click&quot;,function(){})
      $(&quot;#root&quot;).on(&quot;focus&quot;,function(){})
      let fn=function(){}
      $(&quot;#input&quot;).on(&quot;focus&quot;,fn)
      // off取消所绑定的某事件
      $(&quot;#input&quot;).off(&quot;focus&quot;,fn)
      // on做事件委托,eg:#root下的p标签
      $(&quot;#root&quot;).on(&quot;click&quot;,&quot;p&quot;,function(){})

2.其他事件,还有很多,查看API

     $(&quot;#root&quot;).click(function(){})
      $(&quot;#root&quot;).focus(function(){})
      $(&quot;#root&quot;).one(&quot;click&quot;,function(){})  // 只执行一次

八、jQuery对象中的event对象

![]()

九、jQuery动画

1.show、hide、toggle(大小)

      $(&quot;#root&quot;).hide(500)  // 将显示出的元素从大到小隐藏
      $(&quot;#root&quot;).show(500)  // 将显示出的元素从小到大显示
      $(&quot;#root&quot;).toggle(500)  // 切换show和hide

2.slideDown、slideUp、slideToggle(上下)

      $(&quot;#root&quot;).slideUp(500)  // 将显示出的元素从下到上隐藏
      $(&quot;#root&quot;).slideDown(500)  // 将隐藏出的元素从上到下显示
      $(&quot;#root&quot;).slideToggle(500)  // 切换slideUp和slideDown

3.fadeIn、fadeOut、fadeToggle、fadeTo(淡入淡出)

      $(&quot;#root&quot;).fadeOut(500)  // 淡出隐藏
      $(&quot;#root&quot;).fadeIn(500)  // 淡入显示
      // $(&quot;#root&quot;).fadeToggle(500)  // 切换fadeOut和fadeIn
      $(&quot;#root&quot;).fadeTo(5000,0.5)  // 淡出,指定透明度

4.animate

      // 三个参数分别为最终状态(只能是数字样式)、动画时间、执行回调函数,.delay()设置连续动画时间间隔,插在多个animate与animate间
      $(&quot;#root&quot;).animate({width:200},500,function(){console.log(&quot;动画播放完毕&quot;)})

九、$.ajax

      $.ajax({
        url:'请求地址',
        type:'请求方式',
        async:布尔值(默认true,表示异步,false表示同步),
        contentType: 'application/json;charset=utf-8',
        data:{&quot;name&quot;: &quot;lisi&quot;, &quot;age&quot;: 18}, // data,请求参数
        success:function(res{

        })
      })
      $.ajax.get({'url',data,function(res){}})
      $.ajax.post({'url',data,function(res){}})

更多的方法请参考官方API哦

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。