jQuery(一)——认识jQuery

最新推荐文章于 2023-06-18 10:46:35 发布

种下一颗草莓

最新推荐文章于 2023-06-18 10:46:35 发布

阅读量118

点赞数 1

分类专栏： # jQuery

本文链接：https://blog.csdn.net/HangHug_L/article/details/113399016

版权

javascript js jquery

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery(一)——认识

1. 认识jQuery

<!DOCTYPE html>
<html>
    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(function () {     // 表示页面加载完成 之后，相当 window.onload = function () {}
         var $btnObj = $("#btnId"); // 表示按id查询标签对象
         $btnObj.click(function () { // 绑定单击事件
            alert("jQuery 的单击事件");
         });
      });
   </script>
</head>
    
<body>
   <button id="btnId">SayHello</button>
</body>
    
</html>

对比之前学过的Document对象，第9至第14行：

   window.onload = function () {
       var btnObj = document.getElementById("btnId");
       //alert(btnObj);  //打印 [object HTMLButtonElement]   ====>>>  dom对象
       btnObj.onclick = function () {
           alert("js 原生的单击事件");
      }
   }

注意事项：

使用 jQuery 一定要引入 jQuery 库：第7行处，需要有js文件。
jQuery 中的 $ 它是一个函数，根据传入参数的不同执行不同的函数。

$(function(){ … }); 等价于

$(document).ready(function(){ … });

一般jQuery对象的变量名都加一个$便于区分。
怎么为按钮添加点击响应函数的？

1、使用 jQuery 查询到标签对象 2、使用标签对象.click( function(){ … } );

在jQuery中，通过id方式：$(“# ”).click( function(){ … } );

在Dom中，通过id方式：document.getElementById(" ").onclick =function () { … }

2. jQuery核心函数

$是 jQuery 的核心函数，能完成 jQuery 的很多功能。

“ $() ”就是调用这个函数的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-01-28</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        ······里面填充内容
    </script>
</head>
<body>

</body>
</html>

1、传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于 window.onload = function(){}

<script type="text/javascript">
    $(function () {
        alert("页面加载完成之后，自动调用");
    });
</script>

2、传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象

    <script type="text/javascript">
        $(function () {
            $("<div> <span> div-span-1</span></div>" +
                "<div> <span> div-span-2</span></div>").appendTo("body");
        });
    </script>

$(“……”)里面写上标签，通过appendTo加入body语句，相当于直接在body标签中写入：

<div> <span> div-span-1</span></div>
<div> <span> div-span-2</span></div>

3、传入参数为 [ 选择器字符串 ] 时：

$(“# id 属性值”); id 选择器，根据 id 查询标签对象

$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象

$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

$("button").length         //查询button标签的个数

4、传入参数为 [ DOM 对象 ] 时：会把这个 Dom 对象转换为 jQuery 对象

(后面介绍jQuery对象和Dom对象的转换具体看)

3. jQuery 对象和dom 对象区分

Dom 对象

DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

1.通过 getElementById()查询出来的标签对象是 Dom 对象

2.通过 getElementsByName()查询出来的标签对象是 Dom 对象

3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象

4.通过 createElement() 方法创建的对象，是 Dom 对象

jQuery 对象

jQuery 对象 Alert 出来的效果是：[object Object]

5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象

即，传入 HTML字符串

alert($("<h1> </h1>"))

6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象

var btn=document.getElementById("btn01");  //Dom对象  
var $btn=$(btn);   //jQuery对象
alert($btn);

7.通过 JQuery 提供的 API查询到的对象，是 JQuery 对象

即，通过选择器字符串：#id 、 .class 、标签名

4. jQuery对象和Dom对象转化

dom 对象转化为 jQuery对象

1、先有 DOM 对象 2、$( DOM 对象 ) 就可以转换成为 jQuery 对象

如上面3.6所示！传入$函数即可转换
jQuery 对象转化为dom对象

1、先有 jQuery 对象 2、==jQuery 对象[下标]==取出相应的 DOM 对象

var $btns = $("button");
for (var i = 0; i < $btns.length; i++){
	 alert($btns[i]);
}
//$btns是个jQuery对象，但里面每个元素$btns[i]是个dom对象

当jQuery对象$btns只有一个元素时，

只需 $btns[0]即可转换。

dom对象：document.getElementById(“btn01”)

jQuery对象：$( document.getElementById(“testDiv”) )

dom对象：$(document.getElementById(“testDiv”))[0]

5. jQuery对象的本质

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

如果只有一个dom对象，也可以封装入jQuery对象中

jQuery 对象不能使用 DOM 对象的属性和方法

DOM 对象也不能使用 jQuery 对象的属性和方法

种下一颗草莓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery(一)——认识jQuery

jQuery(一)——认识1. 认识jQuery<!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <script type="text/javascript" src="../script/jquery
复制链接

扫一扫

专栏目录