初探Jquery之Jquery入门

最新推荐文章于 2024-08-11 18:40:36 发布

不会敲代码的灵长类

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量120

点赞数

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

本文链接：https://blog.csdn.net/weixin_48093379/article/details/108116657

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Jquery概念

是一个JavaScript的快速开发框架，设计这个框架的目的是写更少的代码做更多的事情，因为它封装了原生js代码。

Jquery的快速入门

1、下载jQuery。笔者使用的是maven导入jQuery.

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>3.3.1-2</version>
</dependency>

2、导入jQuery文件
对于jQuery的每一个版本都有jquery–xxx.js与jQuery–xxx.min.js 其中xxx为版本号，前者为开发版本。用于程序员查看，有注释与良好的缩进。后者没有缩进，但体积很小，用于生产环境。
3、使用。简单使用的样例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>示例页面</title>
   //关键的src路径/
   <script src="webjars/jquery/3.3.1-2/jquery.min.js"></script>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<script>
   //通过jquery获取元素对象
   var div1=$("#div1");
   alert(div1);
</script>
</html>

jquery对象与js对象的区别

1、js对象与jQuery对象的方法不通用。
2、jquery对象比js对象使用更加方便。
相互转换：
js—>jq: ${js对象}就可以了
jq–>js: jq对象【索引】或者jq对象.get(索引)。

时间绑定入口函数与样式控制

1、事件绑定（给按钮绑定事件）

div id="div1">div1</div>
<div id="div2">div2</div>
<input type="button" value="点我" id="b1">
<script>
    //给按钮绑定点击事件，id选择器
    $("#b1").click(function () {
        alert("abc");
    })
</script>

2、入口函数

<script>
    //给按钮绑定点击事件
    $("#b1").click(function () {
        alert("abc");
    })
</script>
<div id="div1">div1</div>
<div id="div2">div2</div>
<input type="button" value="点我" id="b1">

由于执行顺序的问题，脚本里面的代码不会正确的执行。所以添加入口函数就可以。

<script>
    //入口函数，在页面加载之后执行
    $(function () {
        $("#b1").click(function () {
            alert("abc");
        })
    });
</script>
<div id="div1">div1</div>
<div id="div2">div2</div>
<input type="button" value="点我" id="b1">
由于程序执行顺序的

与window.onload的区别是只能执行一次，而$(function)可以定义多次。

3、样式控制

$("#div1").css("background-color","red");

不会敲代码的灵长类

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探Jquery之Jquery入门

Jquery概念是一个JavaScript的快速开发框架，设计这个框架的目的是写更少的代码做更多的事情，因为它封装了原生js代码。Jquery的快速入门1、下载jQuery。笔者使用的是maven导入jQuery.<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1-2</versio
复制链接

扫一扫