Jquery基础知识点

发表于 本文字数： 5.8k 阅读时长 ≈ 5 分钟

img

JQuery

JQuery定义

它是JavaScript的封装，它可以说是开源的JavaScript的函数库
使用它简化了JavaScript开发

JQuery的下载及引用

下载：https://jquery.com/download/
下载好之后需要通过script标签引用，切记其位置必须是其它JavaScript代码之上

1
2
3
4
<script src="jquery-3.6.0.min.js"></script>
   <script>
   //调用Jquery代码
   </script>

JQuery与JavaScript比较

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-3.6.0.min.js"></script>
   <script>
   $(function () {
   //使用has方法
   $("div").has("#demo").css("color","red");
   })
   </script>
 </script>
</head>
<body>
   <div>
     <input type="text">
   </div>
   <div>
     <input type="text" id="demo">
   </div>
</body>
</html>

eq(索引)，表示选取指定索引的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-3.6.0.min.js"></script>
   <script>
   $(function () {
   $("div").eq(0).children().css("color","red");
   })
   </script>
</head>
<body>
   <div>
       <input type="text" placeholder="这是第一个div里面的input">
   </div>
   <div>
       <input type="text" placeholder="这是第二个div里面的input">
       <input type="submit">
   </div>
</body>
</html>

选择转移

我们可以以一个元素为参照，找到其它元素（节点选择）

详细如下：

1
2
3
4
5
6
7
8
$('#box').prev(); 表示选择id是box元素的兄弟节点
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的兄弟节点
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-3.6.0.min.js"></script>
   <script>
     $(function () {
     //确定参照节点
     var $div = $("#demo");
     $div.prev().css("color","red");
     $div.prevAll().css("font-size",33);
     $div.next().css("color","blue");
     $div.nextAll().css("background","gray");
     $div.parent().css("background","#ff6700");
     $div.children().css("color","gold");
     })
   </script>
</head>
<body>
   <h1>这是一个标题</h1>
   <p>这是一个段落</p>
   <p>这是一个段落</p>
   <div id="demo">这是一个div
      <span>这是div里面的span</span>
   </div>
   <h3>这又是一个标题</h3>
   <a href="#">这是一个a标签</a>
</body>
</html>

html方法的使用

在jquery中可以通过html属性为元素设置html内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-3.6.0.min.js"></script>
   <script>
     $(function () {
     var $div = $("#demo");
     //如果要获取内容
     var rs = $div.html();
     alert(rs)
     $div.html("<span style='color: red'>哈嘿~~~~</span>");
     //在元素后追加内容
     $div.append("<span style='color: red'>大宝贝</span>");
     })
   </script>
</head>
<body>
   <div id="demo">
   <p>这是字</p>
   </div>
</body>
</html>

获取和设置元素的属性

prop方法：css方法可以设置元素的样式属性，而该方法可以设置元素的其它属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-3.6.0.min.js"></script>
 <script>
     $(function () {
     var $a = $("#aId");
     var $input = $("#InputId");
     //可以获取
     var Sa = $a.prop("id");
     // alert(Sa);
     //设置元素属性
     $a.prop({"href":"http://www.baidu.com","class":"aClass","title":"这是
    标题"});
     //获取input中的属性value使用的是val()方法
     // var Sinput = $input.prop("value");
     // alert(Sinput);
     var Sinput = $input.val();
     alert(Sinput);
     //设置value值
     $input.val("12313212");
     })
 </script>
</head>
<body>
   <a id="aId">这是a标签</a>
   <input id="InputId" type="text" value="123"/>
   <input id="InputId" type="text" value="123"/>
</body>
</html>

JQuery事件

常用事件

  • click() 鼠标点击事件

  • blur() 离焦事件

  • focus() 聚焦事件

  • mouseover() 鼠标进入事件

  • mouseout() 鼠标离开事件

  • ready() DOM加载完毕触发

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="jquery-3.6.0.min.js"></script>
     <script>
         $(function () {
         var $li = $(".list li");
         var $input = $("#in_one");
         var $btn = $("#btn");
         var $div = $("#demo");
         //点击事件
         $li.click(function () {
         $(this).css({"background":"red"});
         //index()方法可以获取当前元素的索引值
         //alert($(this).index())
         });
         //获取焦点
         $input.focus(function () {
        • JQuery事件
         分区 新分区 1 的第 7 页 
         $input.focus(function () {
         $(this).val("嗨嗨嘿");
         })
     })
     </script>
    </head>
    <body>
       <div id="demo">
       <ul class="list">
         <li>这是一行字</li>
         <li>这是一行字</li>
         <li>这是一行字</li>
         <li>这是一行字</li>
       </ul>
         <input type="text" id="in_one"/>
         <input type="submit" id="btn" value="点一下"/>
       </div>
    </body>
    </html>

    ​