jQuery入门

最新推荐文章于 2024-07-06 16:47:02 发布

迷亭君

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量232

点赞数

分类专栏： ajax+JQuery+Vue 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49044908/article/details/121256185

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery入门

一.jQuery是什么?

jQuery是一个js库,里面有很多非常好用的方法

二.怎么用

看一个入门级别的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个例子</title>
<!--    使用相对路径,指定jQuery库的位置-->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        // 标准写法
        $(document).ready(function () {
            alert("hello jQuery")
        })

        // 简化版本
        $(function () {
            // 代码内容
            alert("hello jQuery 快捷方式")
        })
    </script>
</head>
<body>
    <input type="text" value="你好">
</body>
</html>

首先需要引入jQuery的库,通过一个script标签引入
对于上面代码的解释如下:

$(document), $是jQuery中的函数名称,document是函数的参数作用是将document对象变成 jQuery 函数库可以使用的对象
ready是jQuery中的函数,当页面的dom对象加载成功后会执行括号中函数的内容,相当于js中的onLoad事件
function()是自定义的函数,表示onLoad后要执行的功能

三.dom对象和jQuery对象

dom对象
用js语法创建的对象就是dom对象,如下:

	var obj = document.getElementById("txt1");

obj就是一个dom对象,也是js对象

jquery对象:使用jQuery语法表示的对象叫做jQuery对象
注意:jQuery表示的对象都是数组.
如下:

	var jobj = $("#txt1");

jobj就是使用jQuery表示的对象,也就是jQuery对象.它是一个数组,现在数组中只有一个值.
dom对象和jQuery对象是可以相互转化的

dom对象转换为jQuery对象
语法:$(dom对象)
如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom对象转换为jQuery</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function btnClick() {
            // 获取dom对象
            var obj = document.getElementById("btn");
            // 使用dom的value属性获取值
            alert("使用dom对象的属性 = " + obj.value);
            // dom转换为jQuery,使用jQuery库中的函数
            var jobj = $(obj);
            // 调用jQuery中的函数,获取value的值
            alert(jobj.val())
        }
    </script>
</head>
<body>
    <input type="button" id="btn" value="我是按钮" onclick="btnClick()"/>
</body>
</html>

jQuery对象转换为dom对象
语法:从数组中获取第一个对象,第一个对象就是dom对象,使用[0]或者get(0)
如下:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQuery转换为dom</title>
   <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
   <script type="text/javascript">
       function btnClick() {
           // 使用jQuery的语法获取页面的dom对象
           // 从数组中获取下标是0的dom对象
           // var obj = $("#txt")[0];
           var obj = $("#txt").get(0);
           alert(obj.value);
       }
   </script>
</head>
<body>
   <div>
       <input type="button" value="获取" onclick="btnClick()" /> <br/>
       <input type="text" id="txt" value="输入内容" />
   </div>
</body>
</html>

为什么要进行dom和jQuery的转换?
目的是要使用对象的方法或者属性,当你是dom对象时,可以使用dom对象是属性或者方法;如果要使用jQuery提供的方法,必须是jQuery对象才可以.

迷亭君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门

jQuery入门一.jQuery是什么?jQuery是一个js库,里面有很多非常好用的方法二.怎么用看一个入门级别的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个例子</title> <script type="text/
复制链接

扫一扫