Java-JQuery基础-第42节

最新推荐文章于 2024-08-18 21:36:31 发布

Xue__Feng

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量119

点赞数

分类专栏： java-WEB 文章标签： java javascript css jQuery

本文链接：https://blog.csdn.net/zuefeng/article/details/112374178

版权

java-WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

学习目标：

理解jQuery的相关概念
学会如何使用jQuery
熟练使用jQuery的选择器
掌握DOM的相关操作

学习内容：

一、jQuery基础

1、概念：一个JavaScript框架，简化JS开发

继prototype之后的一个优秀的JS框架
JavaScript框架：本质上就是JavaScript文件

2、快速入门

下载JQuery
- 目前jQuery有三个大版本：
  1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
  功能不再新增。因此一般项目来说，使用1.x版本就可以了，
  最终版本：1.12.4 (2016年5月20日)
  2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
  功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
  最终版本：2.2.4 (2016年5月20日)
  3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
  一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
  目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
- jquery-xxx.js 与 jquery-xxx.min.js 区别：
  - jquery-xxx.js：开发版本，程序员用，有良好的缩进和注释，体积更大
  - jquery-xxx.min.js：生产版本，程序中使用，没有缩进与注释，体积更小
导入jQuery的js文件：.min文件
使用

3、jQuery对象和JS对象区别与转换

jq->js：jq对象[索引] 或者 jq.get(索引)
js->jq：$(js对象)

4、选择器

基本语法学习
- 绑定事件
  - $().click(function(){})
- 入口函数
  - window.onload只能定义一次
  - $(function(){})可以定义多次
- 样式控制
  - $().css(“background-color”,“red”)
  - $().css(“backgroundColor”,“red”)
分类
- 基本选择器
  - 标签（元素）选择器：标签名
  - id选择器：#类名
  - 类选择器：.类名
  - 并集选择器：以逗号隔开
- 层级选择器
  - 后代选择器：以空格隔开
  - 子选择器：以>隔开
- 属性选择器
  - 属性名称选择器：$(“A[属性名]”)
  - 属性选择器：$(“A[属性名=‘值’]”)
    - 不等于：!=
    - 以什么开头：^=
    - 以什么结尾：$=
    - 包含什么：*=
  - 复合属性选择器：$(“A[属性名][属性名=‘值’]…”)
- 过滤选择器
  - 首元素选择器：$(“A:first”)
  - 尾元素选择器：$(“A:last”)
  - 非元素选择器：$(“A:not(.one)”) class不是one
  - 偶数选择器：$(“A:even”)
  - 奇数选择器：$(“A:odd”)
  - 大于索引选择器：$(“A:gt()”)
  - 等于索引选择器：$(“A:eq()”)
  - 小于索引选择器：$(“A:lt()”)
  - 标题选择器(h1-h6)：$(":header")
- 表单过滤选择器
  - 可用元素选择器：$(“A:enabled”)
  - 不可用元素选择器：$(“A:disabled”)
  - 选中选择器：$(“A:checked”)
  - 选中选择器：$(“A:selected”)
    5、DOM操作
内容操作
- html()：获取/设置元素的标签体内容
- text()：获取/设置元素的标签体纯文本内容
- val()：获取/设置元素的value属性值
属性操作
- 通用属性操作
  - attr()：获取/设置元素的属性
  - removeAttr()：删除属性
  - prop()：获取/设置元素的属性
  - removeProp()：删除属性
  - attr与prop区别
    - 操作的是元素固有属性，建议使用prop
    - 操作的是元素自定义属性，建议使用attr
- class属性操作
  - addClass()：添加class属性值
  - removeClass()：删除class属性值
  - toggleClass()：切换class，如果元素class属性存在传递的值删除，不存在添加
  - css()
CRUD操作
- append()：父元素将子元素追加到末尾
- prepend()：父元素将子元素追加到开头
- appendTo()：父元素追加到子元素末尾
- prependTo()：父元素追加到子元素开头
- after()：添加元素到元素后面
- before()：添加元素到元素前面
- innsertAfter()：添加元素到元素前面
- insertBefore()：添加元素到元素后面
- remove()：移除元素
- empty()：清空元素的所有后代元素

6、案例

隔行换色
- 需求：将数据行的奇数行背景色设置为pink，偶数行背景色设置为yellow
- 分析：
  - 获取数据行的奇数行的tr，设置背景色为pink
  - 获取数据行的偶数行的tr，设置背景色为yellow
全选全不选
- 需求：保证第一个复选框的选中状态和下面的选中状态一致
qq表情选择
- 需求：点击qq表情，将其追加到发眼框中
- 分析：
  - 给img图片添加onclick事件
  - 追加到p标签中
下拉列表选中条目左右移动

学习产出：

1、自定义JS框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS框架</title>
    <script src="js/test.js"></script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <script>
        // 根据id获取标签对象
        var element1 = document.getElementById("div1");
        var element2 = document.getElementById("div2");
        // 获取标签体内容
        alert(element1.innerHTML);
        alert(element2.innerHTML);

        // var div1 = get("div1");
        // alert(div1);
    </script>
</body>
</html>

2、快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <script>
        var div1 = $("#div1");
        alert(div1.html());
        var div2 = $("#div2");
        alert(div2.html());
    </script>
</body>
</html>

3、 JQuery与JS对象转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery与JS对象转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <script>
        // 通过jquery获取所有的div标签对象
        var $divs = $("div");
        alert($divs.length);
        $divs.html("aaa");
        $divs[0].innerHTML = "bbb";
        $divs.get(1).innerHTML = "ccc";

        // 通过js获取所有的div标签对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length);
        for (var i = 0;i < divs.length; i++) {
            divs[i].innerHTML = "aaa";
        }
        $(divs).html("ddd");
    </script>
</body>
</html>

4、事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // jQuery入口函数：等待页面资源加载完毕
        $(function () {
            // 给b1按钮添加单击事件
            $("#b1").click(function () {
                alert("abc");
            });
        })
    </script>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <input type="button" value="点我" id="b1">
    <script>
        // 给b1按钮添加单击事件
        $("#b1").click(function () {
            alert("abc");
        });
    </script>
</body>
</html>

Xue__Feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java-JQuery基础-第42节

学习目标：理解jQuery的相关概念学会如何使用jQuery熟练使用jQuery的选择器掌握DOM的相关操作学习内容：一、jQuery基础1、概念：一个JavaScript框架，简化JS开发继prototype之后的一个优秀的JS框架JavaScript框架：本质上就是JavaScript文件2、快速入门下载JQuery目前jQuery有三个大版本：1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了
复制链接

扫一扫