jQuery基本使用

我儿长柏必定高中
86 阅读4分钟

jQuery是一个古老的js库，封装了一些常用的js功能，相比原生api更加简洁。但是随着前端技术的发展，jQuery现在基本不用了，只在一些老项目里还有使用。
本文是jQuery的学习笔记，参考菜鸟教程，总结了一些jQuery的基本用法。

引入

可以从官网下载，也可以通过CDN中引入，这里主播就直接引入字节的了。

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>

基本语法

$(selector).action() selector选择需要查找的html元素(语法同css，不赘述了)，action执行对元素的操作。
比如我们常见的ready()就是一个action，代表网页中的dom结构加载完毕后要执行包裹的回调函数。一般会在最外层套一个ready，把要执行的jQuery语句都放里面。

$(document).ready(function(){
   // 要执行的函数
});
// 可以简写成
$(function(){
  // 要执行的函数
});

特别地，jQuery为表单元素提供了专门的选择器(类似伪类选择器)，可以获取特定类型的表单元素，也可以针对特定状态进行筛选过滤。 参考文献jQuery基础——使用选择器—3属性选择器与表单选择器_jquery input name选择器-CSDN博客

image.png

image.png

  <head>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $("#btn").click(function () {
          $("#test :password").val("修改后的密码域");
          $("#test :disabled").val("不可用");
          $("#test :enabled").val("可用");
          $("#test :checked").removeAttr("checked");
          $("#test :selected").removeAttr("selected");
        });
      });
    </script>
  </head>
  <body>
    <form id="test" method="get" action="">
      <input type="password" name="" id="" value="密码域" /><br />
      <input type="text" name="" id="" disabled value="disabled文本域" /><br />
      <input type="text" name="" id="" value="文本域" /><br />
      <input type="checkbox" name="" id="" value="复选框" checked />复选框<br />
      <input type="radio" name="" id="" value="单选框" checked />单选框<br />
      <select name="">
        <option value="1">1</option>
        <option value="1">2</option>
        <option value="1" selected="selected">3</option>
      </select>
    </form>
    <button id="btn">修改</button>
  </body>

js对象与jQuery对象

二者虽然很相似，但api不能混用，需要进行对象的转换。为了区分两种对象，jQuery对象命名时常在前面加一个$

  • js => jQuery ：$(js对象)
  • js => jQuery ：jQuery对象[索引]
<head>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
  <script>
    $(function () {
      var js = document.getElementById('test').innerHTML;
      var $jquery = $('#test').html();

      // js转jquery
      var $jquery1 = $(document.getElementById('test')).html(); 
      // jquery转js
      var js1 = $('#test')[0].innerHTML;
    });
  </script>
</head>
<body>
  <p id="test">Hello World!</p>
</body>

DOM操作

操作文本/值

  • text(空/新内容/回调)：返回或设置元素的文本内容，类似innerText
  • html(空/新内容/回调)：返回或设置元素的标签内容，类似innerHTML
  • val(空/新内容/回调)：返回或设置元素value属性的值，比如input元素的vlaue

需要注意的是，回调函数是有两个参数的，选中元素在列表中的下标和旧值；回调函数的返回值就是要设置成的新值

  <head>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          alert("值为: " + $("#test").val());
        });
      });
    </script>
  </head>
  <body>
    <p>名称: <input type="text" id="test" value="菜鸟教程" /></p>
    <button>显示值</button>
  </body>

操作属性

  • attr(name, [新value/回调])：返回或设置属性的值。
    这里回调的用法和上面是一样的。
  <head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function () {
        $("button").click(function () {
          console.log($("#position").attr("name")); // 获取name属性,bj
          $("#position").attr("name", "sh"); // 设置name属性为sh
          $("#position").attr("discription", "地图"); // 设置discription属性为地图
        });
      });
    </script>
  </head>
  <body>
    <p id="position" name="bj">地点</p>
    <button>点击</button>
  </body>

添加/删除元素

这部分和原生的js语法就很相似了，不多赘述了

  • append()：在被选元素内部的结尾插入内容
  • prepend()：在被选元素内部的开头插入内容
  • after()：在被选元素之后插入内容
  • before()：在被选元素之前插入内容
  • remove(选择器)：删除被选元素（及其子元素）
  • empty()：清空被选元素的子元素

获取/设置css类

  • addClass(类名)：向被选元素添加一个或多个类
  • removeClass(类名)：从被选元素删除一个或多个类
  • toggleClass(类名)：对被选元素进行添加/删除类的切换操作
  • css(属性名, [属性值])：返回或设置样式属性

遍历

jQuery对象本身就是所有符合条件的元素对象组成的数组，因此可以用下标的方式遍历

<head>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(function(){
            var $lis = $("#city")
            for(var i = 0; i < $lis.length; i++) {
                console.log($($lis[i]).html())
            }
        });
    </script>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</body>

另外，也可以用each方法来遍历回调函数的两个参数分别是索引和当前元素的js对象

    <script>
      $(function () {
        $("#city li").each(function (index, element) {
          console.log(index + ":" + element.innerHTML);
        });
      });
    </script>

如果想向下遍历或向上遍历，也有对应的方法

  • parent()：返回被选元素的直接父元素
  • parents(选择器)：返回被选元素的所有祖先元素直到html
  • parentsUntil(第二个元素的选择器)：返回两个给定元素之间的所有祖先元素
  • children(选择器)：返回被选元素的所有直接子元素
  • find(选择器)：返回被选元素的所有子元素直到最后一个后代

还有很多其他的遍历方法，遍历兄弟元素或者是过滤，有需要查文档吧jQuery 遍历方法 | 菜鸟教程

效果

jQuery提供了很多方法来实现简单的动画效果

  • 显示和隐藏
    • hide(speed, callback)：隐藏选中的元素，speed可以使用slow、fast、normal或毫秒数；callback是执行完毕后执行的回调函数，jQuery自身提供"linear" 和 "swing"
    • show(speed, callback)：显示选中的元素，参数同上
    • toggle(speed, callback)：在选中和隐藏中切换
  • 淡入淡出
    • fadeIn、fadeOut、fadeToggle：淡入淡出切换，参数同上
    • fadeTo(speed, opacity, callback)：给淡入淡出效果设定不透明度
  • 滑动
    • slideDown(speed,callback)：向上滑动元素
    • slideUp(speed,callback)：向下滑动元素
    • slideToggle(speed,callback)：向上或向下滑动元素
  • 动画
    • animate({params} ,speed,callback)：自定义动画效果，params是形成动画的css属性。注意元素position属性应设置为 relative, fixed, 或 absolute；属性名要用小驼峰命名；属性值可以用+=或-=。如果连续编写多个animate，会形成队列依次调用。
    • stop(stopAll,goToEnd)：停止动画，第一个参数是是否清除整个动画队列默认false，第二个参数是是否立即完成当前动画默认false。注意stop只能清空动画队列，但clearQueue(queueName)可以清空所有通过queue()创建的队列
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    // 会依次执行
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>
avatar
文章
阅读
粉丝