JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

idiot_MAN

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量185

点赞数

分类专栏： jquery 前端文章标签： jquery 前端

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126720229

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

JQuery

文章目录

JQuery

https://www.jquery123.com/

https://jquery.cuishifeng.cn/

什么是JQuery

jquery一个高效的，精简的且功能丰富的JavaScript工具库，满足了各种浏览器的兼容问题

web应用发展的过程中，jquery起到了不可或缺的推动作用

当下框架流行的时代，jquery不再那么适用

使用jquery感受，简单简洁，链式调用，读写一体

JQuery使用

下载—— 引入、

下载

https://jquery.com/download/

引入

<script src="./js/jquery-3.6.0.min.js"></script>

版本   1.x   ie6+   ,2.X  IE 9+  ,3.X  IE10+

入口

<script>
        $(function(){
            //开始写代码
            console.log(123);
        })
</script>

为什么使用jQuery

写少的代码，做多的事情

免费轻量级的js库，容量很小

兼容市面上的主流浏览器

注意jQuery不是将所有的js封装，只是有选择的封装

完善的Ajax应用，使Ajax变得简单

DOM操作简单化

丰富的插件支持，强大的易扩展性

开始jQuery

选择器

基本选择器
属性选择器
层级选择器
…
过滤选择器
选择的方法

jQuery对象的写法

// console.log(document.getElementById('box'))  null
      // window.onload = function () {
      //   console.log(document.getElementById('box'))
      // }
      // window.onload = function () {
      //   console.log(1)
      // }

      // console.log($('#box'))
      // 为了防止文档结构还没有完全加载就运行jQusery代码
      // $(document).ready(function () {
      //   // 写jquery代码

      // })
      // 简写
      $(function () {
        // 写jquery代码
        console.log($('#box'))
      })
      $(function () {
        // 写jquery代码
        console.log(123)
      })
      // 以上两种写法 相当于js中的window.onload = function(){}

      // 区别
      /*

1：执行时机
window.onload必须再网页中所有的内容都加载完毕之后才可执行(包括图片img)
$(document).ready(function () {})页面当中的DOM结构绘制加载完毕即可执行，可能
与dom元素关联的并未完全加载完
2：编写个数
window.onload只能写一个
$(document).ready(function () {})可以编写多个并且都会执行
3：简化写法
window.onload没有简化写法
$document).ready(function () {})可以简化为$ (function(){})

js的DOM对象和jQuery对象的区别

<div id="box">123</div>
    <script>
      // JavaScript通过js相关对象方法获取的对象
      var box = document.getElementById('box')
      // console.log(box)
      // 通过jQuery包装后产生的对象  jQuery对象
      // console.log($('#box'))
      // 注意:jQuery对象无法应用Dom对象的任何方法，Dom对象无法应用jquery的任何方法

      // jQuery对象和js对象可以相互转换

      // var $c = $('#box')
      // 第一种  转换为js对象
      // var c = $c[0]
      // console.log(c)
      // 第二种  转换为js对象
      // var c = $c.get(0)
      // console.log(c)

      // javascript对象转jQuery对象
      var $cr = $(box)
      console.log($cr)
</script>

DOM操作

val()
html()
width()
height()
text()
innerWidth()
attr()

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
      .mytext {
        width: 300px;
        height: 200px;
        padding: 50px;
        border: 10px solid red;
      }

      .one {
        color: red;
      }
      .two {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="mytext">
      jquery是js的工具库
      <span>span标签</span>
    </div>
    <button id="btn">删除</button>
    <div class="box"></div>

    <a href="#">连接</a>
  </body>
  <script>
    // 属性操作与获取

    // console.log($('.mytext').text())
    // console.log($('.mytext').html())
    // // $('.box').text("<a href='#'>超链接</a>")
    // $('.box').html("<a href='#'>超链接</a>")
    // console.log($('.mytext').width())
    // console.log($('.mytext').height())
    // $('.mytext').width(100)
    // $('.mytext').height(100)

    // console.log($('.mytext').innerWidth()) //width +padding
    // console.log($('.mytext').innerHeight()) //height +padding
    // console.log($('.mytext').outerHeight()) //width +padding+border
    // console.log($('.mytext').outerWidth()) //height +padding+border
    console.log($('a').attr('href'))
    $('a').attr('href', 'http://www.baidu.com')
  </script>
</html>

属性的获取与操作

class的操作

 $('.mytext').addClass('one')
    $('.mytext').removeClass('one')
    $('.mytext').toggleClass('two')
    console.log($('.mytext').hasClass('two')) //true

dom操作

// dom节点的操作
    // 添加
    // $('.mytext').append('<h1>我是h1标签</h1>')
    // $('.mytext').prepend('<h1>我是h1标签</h1>')
    // $('.mytext').before('<h1>我是h1标签</h1>')
    // $('.mytext').after('<h1>我是h1标签</h1>')

    $('#btn').click(function () {
      // $('.mytext').remove()//当前dom全部删除
      $('.mytext').empty() //清空子元素  当前dom还在
    })

html事件

jQuery动画

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <button id="btn">显示</button>
    <button id="btn1">隐藏</button>
    <button id="btn2">显示/隐藏</button>
    <button id="btn3">滑入</button>
    <button id="btn4">滑出</button>
    <button id="btn5">滑入/滑出</button>
    <button id="btn6">淡入</button>
    <button id="btn7">淡出</button>
    <button id="btn8">淡入/淡出</button>
  </body>
  <script>
    /* 
    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。
    */
    $('#btn').click(function () {
      // $('.box').show()
      // $('.box').show('slow')
      // $('.box').show(3000)
      $('.box').show(3000, function () {
        alert('wo的动画执行完成')
      })
    })
    $('#btn1').click(function () {
      // $('.box').hide()
      $('.box').hide(3000)
    })

    $('#btn2').click(function () {
      $('.box').toggle(3000)
    })

    $('#btn3').click(function () {
      $('.box').slideDown(3000, function () {
        alert('wo的动画执行完成')
      })
    })
    $('#btn4').click(function () {
      $('.box').slideUp(3000)
    })

    $('#btn5').click(function () {
      $('.box').slideToggle(3000)
    })

    $('#btn6').click(function () {
      $('.box').fadeIn(3000, function () {
        alert('wo的动画执行完成')
      })
    })
    $('#btn7').click(function () {
      $('.box').fadeOut(3000)
    })

    $('#btn8').click(function () {
      $('.box').fadeTo(3000, 0.6)
    })
  </script>
</html>

dom遍历

	//  遍历子孙节点  children  find
    // $('ul').children('.list1').addClass('one') //查找符合某种选择器的孩子节点  参数选填
    // $('ul').find('.list5').addClass('one') //查找符合某种选择器的孩子节点  参数必填

    // 遍历祖先节点  parent  parents  parentUntil
    // $('span').parent().addClass('one')
    // $('span').parents().addClass('one')
    // 查找span的祖先元素  但是不包含body
    // $('span').parentsUntil('body').addClass('one')

    // 遍历同级节点  siiblings  next  nextUntil  nextAll  prev  prevUntil  prevAll
    // $('.list').siblings().addClass('one')
    // $('.list3').next().addClass('one')
    // $('.list').nextAll().addClass('one')
    // $('.list').nextUntil('.list5').addClass('one')

    // $('.list3').prev().addClass('one')
    // $('.list3').prevAll().addClass('one')
    // 给.list3前面直到.list前的元素加上类 one
    $('.list3').prevUntil('.list').addClass('one')

五角星案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .comment{
            font-size: 40px;
            color: red;
        }
        .comment li{
            float: left;
            cursor: pointer;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
   <ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
   </ul>
<script>
    $(function(){
        var wjx_none='☆'
        var wjx_sel='★'
        //鼠标放上去当前的li和之前的所有的li的内容全部变为实心五角星  移开变成空心
    $('.comment li').on('mouseenter',function(){
        //$(this).text(wjx_sel).prevAll('li').text(wjx_sel)
        //$(this).nextAll('li').text(wjx_none)
        
        //end()  结束之后再使用，相当于重新一行再次使用this
           $(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none)
           
        $('.comment li').on('mouseleave', function () {
        // current用来记录离开时的星星
        if ($('li.current').length === 0) {
          $('.comment li').text(wjx_none)
        } else {
          $('li.current')
            .text(wjx_sel)
            .prevAll('li')
            .text(wjx_sel)
            .end()
            .nextAll('li')
            .text(wjx_none)
        }
      })

      $('.comment li').on('click', function () {
        $(this).attr('class', 'current').siblings('li').removeAttr('class')
      })
    })
    })

</script>
</body>
</html>

idiot_MAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

jquery一个高效的，精简的且功能丰富的JavaScript工具库，满足了各种浏览器的兼容问题web应用发展的过程中，jquery起到了不可或缺的推动作用当下框架流行的时代，jquery不再那么适用使用jquery感受，简单简洁，链式调用，读写一体。
复制链接

扫一扫