天天看点

初探Jquery之Jquery入门Jquery概念Jquery的快速入门jquery对象与js对象的区别时间绑定 入口函数 与样式控制

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、样式控制

继续阅读