jQuery介绍(一)

最新推荐文章于 2021-12-20 12:16:24 发布

打酱油的女孩子

最新推荐文章于 2021-12-20 12:16:24 发布

阅读量137

点赞数

分类专栏： js jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_38341556/article/details/108310347

版权

js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

jquery介绍（一）

1 jQuery介绍
2 $的使用
3 jQuery中的入口函数介绍
4 js原生对象和jQuery对象的相互转换
5 jQuery的选择器介绍
6 jQuery的选择器介绍-2
7 jQuery的选择器介绍-3
8 jQuery的选择器介绍-4
9 jQuery常用方法-html-text
10 jQuery常用方法-val
11 jQuery常用方法-attr-prop
12 jQuery常用方法-removeAttr-removeProp
13 jQuery常用方法-css
14 jQuery常用方法-关于获得元素尺寸的

1 jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

学习 jQuery就是学习 jQuery中常用的方法的使用。

如果想使用jQuery，需要引入jQuery源代码。
官网：https://jquery.com/
最新版本：3.5.1

最新压缩版本：compressed, production jQuery 3.5.1
产品发布的时候建议使用的版本。
只有源代码。体积比较小。
非压缩的版本：uncompressed, development jQuery 3.5.1 ：
开发的过程中建议使用的版本。
源代码+全面的注释。

我们使用的版本：1.12.4。兼容性比较好的版本。
使用jQuery：
通过script标签，src属性引入到当前文件中使用。
可以直接引入本地外部的文件，也可以是网络的文件。
jQuery中文网站：https://jquery.cuishifeng.cn/
jQuery插件网站：http://www.jq22.com/ 可以下载源代码。

2 $的使用

在jQuery中。$ 代表了jQuery的构造函数。$ 是jQuery的别名。
$等价于jQuery名字。

$在jQuery中还可以进行类型的转换。js原生对象到jQuery对象的转换。
$进行页面元素的选取。

如果其他的js的代码中使用$符号。那么就会和jQuery冲突。那么就需要使用jQuery来替代 $ 使用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<script>
 console.log (jQuery);
 console.log ($ === jQuery);
</script>
</body>
</html>

3 jQuery中的入口函数介绍

//js原生的入口函数。
window.onload = function(){}
onload事件：js的原生事件。是在整个文档加载完毕之后触发执行。包括外部的资源文件的加载。

jQuery的入口函数：
ready事件：是jQuery事件。是在DOM树结构分析完毕之后执行的。不包括外部资源的加载。
jQuery的入口函数，ready事件不会被覆盖。定义多个事件处理程序，都会被执行。

区别：
1：触发的时间点不同。
2：是否可以被覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script>
    //使用原生的js获得div中的内容。
    // var div = document.querySelector("div");
    // console.log (div.innerHTML);

    //使用原生的js的入口函数解决.
    window.onload = function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML);
    }
    //会覆盖上面的内容。
    window.onload = function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML+"--load");
    }

    //使用jQuery实现上述的功能。
    /***********方式-1*********/
    $(document).ready(function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML+"%%");
    });
    $(document).ready(function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML+"%%");
    });

    /***********方式-2*********/
    //是方式-1 的简写形式。
    $(function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML + "**");
    })
    $(function () {
        var div = document.querySelector ("div");
        console.log (div.innerHTML + "**");
    })

</script>
<div>hello</div>
</body>
</html>

4 js原生对象和jQuery对象的相互转换

js原生对象：通过js的原生代码，获得的对象。
jQuery对象：通过jQuery的方法获得的对象。
jQuery对象变量名建议前面添加$。表示通过jQuery的方式获得的。

js原生对象转换为 jQuery对象：$(js原生对象)
jQuery对象转换为 js原生对象：jQuery对象[下标]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div>hello</div>
<script>
    //js的原生对象的获得
    var div = document.querySelector("div");
    console.log (div);
    console.log (div.innerHTML);
    //js---jQuery对象
    console.log ($(div).html());

    //jQuery对象
    var $div = $("div");
    console.log ($div);
    console.log ($div.html());
    //jQuery对象--js
    console.log ($div[0].innerHTML);
</script>
</body>
</html>

5 jQuery的选择器介绍

通过jQuery各种选择器可以选取页面上不同需求的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="box">我是div</div>
<ul>
    <li>1111111111</li>
    <li class="sty">222222222222</li>
    <li>333333333333</li>
    <li class="sty">44444444444</li>
    <li id="li5">555555555555555</li>
    <li>666666666666</li>
    <li class="sty">777777777777777777</li>
    <li>8888888888888</li>
    <li>999999999999</li>
</ul>
<div>
    <span>span111</span>
    <h1>h111111</h1>
    <h1>h111111</h1>
    <p>
        <span>span222</span>
    </p>
    <h2>h111111</h2>
    <span>span333</span>
</div>
<span>span333</span>
<script>
    //基本选择器介绍
    //id选择器
    $("#box").css("backgroundColor","red");
    $("#box").css("background-color","blue");
    //类选择器
    $(".sty").css("backgroundColor","red");
    //群组选择器
    $("#box, .sty").css("backgroundColor","orange");
    //元素选择器
    $("span").css("backgroundColor","pink");
    //全局选择器  不建议使用的。
    // $("*").css("backgroundColor","pink");
    //后代选择器
    $("div span").css("backgroundColor","gray");
    //子代选择器
    $("div>span").css("backgroundColor","blue");
    //下一个兄弟
    $("#li5+li").css("backgroundColor","red");
    //后面所有的兄弟
    $("#li5~li").css("backgroundColor","green");

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

6 jQuery的选择器介绍-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul>
    <span>000</span>
    <li>1111111111</li>
    <li class="sty">222222222222</li>
    <li>333333333333</li>
    <li class="sty">44444444444</li>
    <li id="li5">555555555555555</li>
    <li>666666666666</li>
    <li class="sty">777777777777777777</li>
    <li>8888888888888</li>
    <li>999999999999</li>
</ul>
<ul>
    <li>1111111111</li>
    <li class="sty">222222222222</li>
    <li>333333333333</li>
    <li class="sty">44444444444</li>
    <li>555555555555555</li>
    <li>666666666666</li>
    <li class="sty">777777777777777777</li>
    <li>8888888888888</li>
    <span>lastspan</span>
    <li>999999999999</li>
</ul>
<div>
    <span>span111</span>
    <h1>h111111</h1>
    <h1>h111111</h1>
    <p>
        <span>span222</span>
    </p>
    <h2>h111111</h2>
    <span>span333</span>
</div>
<span>span333</span>
<script>
    //过滤选择器。
    //容器中的第一个元素，第一个ul中的第一个子元素
    $("ul :first").css("backgroundColor","red");
    //容器中的最后一个元素，最后一个ul中的最后一个子元素
    $("ul :last").css("backgroundColor","red");
    //容器中的第一个指定标签的元素
    $("ul li:first").css("backgroundColor","blue");
    //容器中的最后一个指定标签的元素
    $("ul span:last").css("backgroundColor","blue");
    //容器中指定下标的元素  下标从0开始。
    $("ul :eq(2)").css("backgroundColor","orange");
    //容器中偶数下标的元素
    $("ul :even").css("backgroundColor","pink");
    //容器中所有的偶数的li的元素
    $("ul li:even").css("backgroundColor","green");
    //奇数
    $("ul :odd").css("backgroundColor","pink");
    $("ul li:odd").css("backgroundColor","green");
    //容器中下标大于n的所有的元素
    $("ul :gt(3)").css("backgroundColor","blue");
    $("ul li:gt(3)").css("backgroundColor","blue");
    //容器中下标小于n的所有的元素
    $("ul :lt(3)").css("backgroundColor","blue");
    $("ul li:lt(3)").css("backgroundColor","orange");

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

7 jQuery的选择器介绍-3

通过jQuery各种选择器可以选取页面上不同需求的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul>
    <span>000</span>
    <li>1111111111</li>
    <li class="sty">222222222222</li>
    <li>333333333333</li>
    <li class="sty">44444444444</li>
    <li id="li5">555555555555555</li>
    <li>666666666666</li>
    <li class="sty">777777777777777777</li>
    <li>8888888888888</li>
    <li>999999999999</li>
</ul>
<ul>
    <li>1111111111</li>
    <li class="sty">222222222222</li>
    <li>333333333333</li>
    <li class="sty">44444444444</li>
    <li>555555555555555</li>
    <li>666666666666</li>
    <li class="sty">777777777777777777</li>
    <li>8888888888888</li>
    <span>lastspan</span>
    <li>999999999999</li>
</ul>
<div>
    <span>span111</span>
    <h1>h111111</h1>
    <h1>h111111</h1>
    <p>
        <span>span222</span>
    </p>
    <h2>h111111</h2>
    <span>span333</span>
</div>
<span>span444</span>
<script>
    //结构伪类选择器
    //第一个孩子元素  所有的ul中的第一个孩子是li的子元素。
    $("ul li:first-child").css("backgroundColor","red");//1
    //最后一个孩子
    $("ul li:last-child").css("backgroundColor","red");//2
    //第n个孩子。 序号从1开始。
    $("ul li:nth-child(2)").css("backgroundColor","blue");//2
    //偶数的孩子、奇数的孩子
    $("ul li:nth-child(even)").css("backgroundColor","pink");//
    $("ul li:nth-child(odd)").css("backgroundColor","blue");//
    //倍数的孩子
    $("ul li:nth-child(3n)").css("backgroundColor","orange");//
    //第倒数n个孩子。 序号从1开始。
    $("ul li:nth-last-child(2)").css("backgroundColor","gray");//
    //容器中的指定类型的第一个元素
    $("div span:first-of-type").css("backgroundColor","orange");//2
    //最后一个
    $("div span:last-of-type").css("backgroundColor","blue");//2
    //第n个类型为指定的元素  n从1开始。
    $("div span:nth-of-type(1)").css("backgroundColor","black");//2
    $("div span:nth-last-of-type(1)").css("backgroundColor","black");//2




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

8 jQuery的选择器介绍-4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="password"><br>
<input type="password"><br>
爱好：
<input type="radio" name="hobby" checked>学习
<input type="radio" name="hobby">读书
<input type="radio" name="hobby">运动<br>

面向对象的三大特性：
<input type="checkbox" name="hobby" checked>封装
<input type="checkbox" name="hobby" checked>继承
<input type="checkbox" name="hobby">多态<br>

<input type="submit" value="提交">
<input type="reset" value="重置">
<button>点我</button>
<button>用力点我</button>

<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="" selected>天津</option>
    <option value="">重庆</option>
</select>

<script>
    //表单过滤选择器
    //所有的input标签的元素
    $(":input").css("backgroundColor","red");
    //所有类型为text的元素
    $(":text").css("backgroundColor","blue");
    //所有类型为password的元素
    $(":password").css("backgroundColor","orange");
    //所有类型为radio的元素
    console.log ($(":radio"));
    //所有类型为checkbox的元素
    console.log ($(":checkbox"));
    //所有的提交按钮
    $(":submit").css("backgroundColor","blue");
    //所有的重置按钮
    $(":reset").css("backgroundColor","orange");
    //所有的button
    $(":button").css("backgroundColor","pink");
    //获得所有的checked的表单
    console.log ($(":checked"));
    //获得所有的selected 的表单
    console.log ($(":selected"));
</script>
</body>
</html>

9 jQuery常用方法-html-text

常用方法:
html() 和原生js中的innerHTML的作用一模一样。
text() 和原生js中的innerText的作用基本一样。

html()：设置和获取元素中的内容。包括子标签的内容。
text()：设置和获取元素中的文本内容。

注意：如果jQuery对象是一个集合，调用text()方法，底层会隐式迭代所有的集合中的元素，获得所有的元素中的文本。html()只能获得集合中的第一个元素中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div>hello<span>world</span></div>
<ul>
    <li>1111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
<script>
    // var div = document.querySelector("div");

    //html
    var $div = $("div");
    console.log ($div.html());//hello<span>world</span>
    $div.html("hello");
    $div.html("<i>hello<span>world</span></i>");

    //text
    console.log ($div.text());//helloworld
    console.log ($div.text("<i>hello<span>world</span></i>"));//<i>hello<span>world</span></i>

    //多个元素
    var lis = document.querySelectorAll("li");
    console.log (lis.innerText);//undefined
    console.log ($("li").text());//1111222333444555
    console.log ($("li").html());//11111

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

10 jQuery常用方法-val

表单元素的方法：val()
作用：设置和获取表单的内容。等价于原生js中的表单的value属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<input type="text">
<button>点我</button>
<script>
    var $inp = $("input");

    $("button").click(function () {
        //获得表单中的内容
        var val = $inp.val();
        //设置内容
        if(val.length === 0){
            $inp.val(~~(Math.random()*1000));
        }else{
            $inp.val("");
        }
    })
</script>
</body>
</html>

11 jQuery常用方法-attr-prop

常用方法：
作用：用来设置和获取元素属性的。

prop：
1: 不能获得自定义属性的值。
2: 不能设置自定义属性的值。

attr：
1：可以获得自定义属性的值。
2: 可以设置自定义属性的值。

设置属性的时候可以一次性设置多个属性。使用键值对的集合。
使用对象来设置。

使用：
1：如果是内置的属性，使用prop
2：如果是自定义的属性 attr。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="box" title="hello" my="world">我是div</div>
<script>
   //获得元素指定的属性。
   var $div = $("div");
   console.log ($div.attr("title"));
   console.log ($div.attr("my"));
   console.log ($div.prop("title"));
   console.log ($div.prop("my"));
   //设置元素的属性。
   $div.attr("title","title");
   $div.attr("my","my");
   $div.attr("class","sty");//OK

   $div.prop("title","newtitle");
   $div.prop("my","newmy");
   $div.attr("class","newsty");

   //一次性设置多个属性
   $div.attr({
       id:"id1",
       title:"title1",
       class:"myclass"
   });
   $div.prop({
       id:"id2",
       title:"title2",
       class:"myclass2"
   });
</script>
</body>
</html>

12 jQuery常用方法-removeAttr-removeProp

删除属性的方法：
removeAttr:
直接将属性键值对统统删除掉。
可以删除自定义属性。
removeProp：
内置属性：属性名保留，属性值为undefined。
不可以删除自定义属性。
总结：removeAttr 可以一次性删除多个属性，使用空格分隔属性名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div></div>
<script>
    //先使用attr添加若干属性。然后删除。
    var $div = $("div");
    $div.attr("id","box");
    $div.attr("title","title");
    $div.attr("class","sty");
    $div.attr("myattr","myattr");
    //测试删除
    // $div.removeAttr("id");
    // $div.removeAttr("myattr");

    // $div.removeProp("id");
    // $div.removeProp("myattr");

    //删除多个属性
    $div.removeAttr("id myattr");//删除成功

    $div.removeProp("title class");//删除失败

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

13 jQuery常用方法-css

css：用来获得和设置元素的样式。

原生js获得css行内样式对象：元素对象.style
获得内部和外部的样式对象：window.getComputeStyle(ele)

获得样式： jQuery对象.css(样式名)

设置样式： jQuery对象.css(样式名,样式值)

注意：
1：对于jQuery中的用于修改元素的方法，通常方法返回的是它自身。
2: 使用css的时候，样式的名可以使用驼峰命名法，或者是中划线的方式。
3：可以一次对某个元素使用对象设置多个样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div{
          background-color: red;
          font-size: 50px;
          text-align: center;
          line-height: 200px;
      }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div style="width: 200px; height: 200px">hello</div>
<script>
  //css 获得元素的行内和内部样式。
  $div = $("div");
  console.log ($div.css("width"));//200px
  console.log ($div.css("background-color"));//red
  console.log ($div.css("fontSize"));//50px

  //css设置样式.
  $div
      .css("width","300px")
      .css("backgroundColor","blue")
      .css("fontSize","20px")
      .css("color","yellow");

  //css 一次设置多个样式
  $div.css({
      width:"500px",
      backgroundColor:"pink",
      fontSize:"70px",
      color:"orange"
  });

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

14 jQuery常用方法-关于获得元素尺寸的

关于元素的尺寸的方法：
1： width()
height()
包含显式内容的区域和滚动条的区域。
不受：内边距、外边距、边框的影响。
2：
innerWidth()
innerHeight();
包含了内容区域、内边距、滚动条。
不受：外边距、边框的影响。
3：
outerWidth()
outerHeight()
包含了内容区域：内边距、滚动条、边框。
不受：外边距的影响。
注意：
1：上述的方法获得元素的尺寸返回的是number类型的数据。
2: 设置元素尺寸的时候，支持纯数值实参，和字符串带px的实参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: solid 10px;
            padding: 30px;
            margin: 40px;
            overflow: scroll;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<script>
    //获得尺寸。
    var $div = $("div");
    console.log ("width = " + $div.width());//100
    console.log ("height = " + $div.height());//100

    console.log ("innerWidth = " + $div.innerWidth());//160
    console.log ("innerHeight = " + $div.innerHeight());//160

    console.log ("outerWidth = " + $div.outerWidth());//180
    console.log ("outerHeight = " + $div.outerHeight());//180

    //设置尺寸  OK
    $div.width(200);
    $div.outerHeight("400px");

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

打酱油的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery介绍(一)

jquery介绍（一） 1 jQuery介绍2 $的使用3 jQuery中的入口函数介绍4 js原生对象和jQuery对象的相互转换5 jQuery的选择器介绍6 jQuery的选择器介绍-27 jQuery的选择器介绍-38 jQuery的选择器介绍-49 jQuery常用方法-html-text10 jQuery常用方法-val11 jQuery常用方法-attr-prop12 jQuery常用方法-removeAttr-removeProp13 jQuery常用方法-css14 jQuery常用方法
复制链接

扫一扫