jQuery初识

最新推荐文章于 2021-07-23 23:08:11 发布

破晓Dawn

最新推荐文章于 2021-07-23 23:08:11 发布

阅读量72

点赞数

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

本文链接：https://blog.csdn.net/qq_41093260/article/details/118378340

版权

javaweb 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

JQuery

是一个js的框架,可以有效的提高javaScript的编码,更加简化,同样也是一个js文件.
关于jQuery全部版本,博客已经上传过,可以点下面链接获取
https://blog.csdn.net/qq_41093260/article/details/118344632

自我编写一个js的框架

功能实现
使用$()可以直接获取id

分析

创建html页面
1. 导入创建js文件
2. 页面写入id为btn的button
创建js文件
1. 定义方法$(id),返回id
2. 方法体内写获取id

代码实现

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_自定义js框架</title>
</head>
<body>
<button id="btn">点击</button>
</body>
<!--引入自己写的js文件-->
<script src="js/demo.js"></script>
<script>
    //调用$获取id
    $("btn").onclick=function(){
        alert("你好");
    }
</script>
</html>

js文件

//声明方法,名字为$,参数为id
function $(id){
    //将js获取的id对象返回
    return document.getElementById(id);
}

jquery快速入门

html页面
导入jquery文件
使用$(id)获取,添加click事件,点击后alert();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_Jquery快速入门</title>
</head>
<body>
<button id="btn">点击</button>
</body>
<script src="js/demo.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        $("#btn").click(function(){
            alert("你好");
        });
    });
</script>
</html>

jQuery与js的转换

当需要js对象转为jquery时,可以直接使用$(js对象)即转为jquery对象
反之,jquery对象转为js对象,因为jquery是数据对象,可以使用$()[0]根据index取到,返回的是DOM对象也就是js对象
代码演示

//js转为jquery
var elementById = document.getElementById("div1");
//jquery对象
var $1 = $(elementById);
//Jquery转js对象
$("#div1")[0].innerHTML="DOM";

破晓Dawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录