1. 技术文章
  2. 11-Ajax和jQuery学习（4）- jQuery(1)

11-Ajax和jQuery学习（4）- jQuery(1)

由 若如初见. 提交于 2020-01-22 00:26:15

1 jQuery

  • jQuery 是一个 JavaScript 库,即对js的封装
  • jQuery 极大地简化了 JavaScript 编程,如对节点增删改查及动画添加
  • jQuery 封装了异步post和 get请求

1.1 jQuery 可以做的

  • HTML 元素选取
  • HTML 事件函数
  • HTML 元素操作-增删改查
  • CSS 操作
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX

1.2 jQuery 导入

  • 把jquery.js导入项目WebContent的js 目录下
  • 在html的head标签中导入jQuery的js文件
  • 在script 标签中写jQuery代码，如图，代码都写在function的括号内

在这里插入图片描述

1.3 文档就绪函数

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        // 文档加载完毕后再调用这个函数,js
       /* window.onload = function () {
            var divTag =  document.getElementById("div1");
            divTag.innerHTML = "你好";
        }*/

        /*文档就绪函数，jQuery*/
        /*$(document).ready(function () {
            var divTag =  document.getElementById("div1");
            divTag.innerHTML = "你好";
        });*/


        $(function () {
            var divTag =  document.getElementById("div1");
            divTag.innerHTML = "你好";
        });

    </script>
</head>
<body>
<div id="div1"></div>

</body>
</html>

2 jQuery 语法

基础语法是：$(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

2.1 id 选择器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        /*css id选择器*/
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                /*jQuery id 选择器，更新div的宽度和高度
                * 可以绑定事件
                * 可以改变样式
                * */
                $('#div1').width(200);
                $('#div1').height(200);

            });
        });
    </script>
</head>
<body>
<div id="div1"></div>
<button id="btn">点击</button>
</body>
</html>

2.2 元素选择器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        /*css id选择器*/
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2 {
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                /*jQuery 元素 选择器，更新div的宽度和高度
                * */
               $('div').width(200);
               $('div').height(200);
            });
        });
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<button id="btn">点击</button>
</body>
</html>

2.3 类选择器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        /*css id选择器*/
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2 {
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                // 类选择器
              $('.mydiv1').width(200);
              $('.mydiv1').height(200);
            });
        });
    </script>
</head>
<body>
<div id="div1" class="mydiv1"></div>
<div id="div2" class="mydiv2"></div>
<button id="btn">点击</button>
</body>
</html>

2.4 jQuery 事件监听函数

在这里插入图片描述

2.5 组合选择器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                // 元素 + id 选择器
                $('span#s1').css('background-color','green');

                // 元素 + 类选择器
                $('span.s2').css('background-color','red');

                // 子级别
                $('div #p1').css('background-color','yellow');
            });
        });
    </script>
</head>
<body>
<div>
    <span id="s1">span1</span><br>
    <span class="s2">span2</span>
</div>
<div>
    <p id="p1">段落1</p>
    <p>段落2</p>
</div>
<button id="btn">点击</button>
</body>
</html>

2.6 属性选择器

  • jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  • $("[src]") 选取所有带有 href 属性的元素。
  • $("[src='#']")选取所有带有 href 值等于 “#” 的元素。
  • $("[src$='.jpg']")选取所有 href 值以 “.jpg” 结尾的元素。

3 jQuery 筛选

3.1 普通筛选

  • :first 第1个
  • :last 最后1个
  • eq(index) 指定索引
  • :even 偶数
  • :odd 奇数
  • :lt(index)小于
  • :gt(index)大于
  • :not(selector) 排除
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
               // $('li').css('background-color','yellow');
                $('li:first').css('background-color','yellow');
            });
        });
    </script>
</head>
<body>
<ul>
    <li>Java 基础入门</li>
    <li>Hadoop 教程</li>
    <li>Spark 源码解析</li>
    <li>数据库优化</li>
</ul>
<button id="btn">点击</button>
</body>
</html>

3.2 查找筛选

  • parent([expr])
    取得一个包含着所有匹配元素的唯一父元素的元素集合

  • children([expr])
    取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

  • siblings([expr])
    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

4 jQuery 控制 css

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#div1').css({'width':200,'height':200,'background-color':'red'});
            });
        });
    </script>
</head>
<body>
<div id="div1"></div>
<button id="btn">点击</button>
</body>
</html>

5 jQuery 控制 html

5.1 添加标签

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
              $('ul').append('<li>射雕英雄传</li>');
        });
        });
    </script>
</head>
<body>
<ul>
    <li>三国</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
<button id="btn">点击</button>
</body>
</html>

5.2 删除标签

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

5.3 设置或获取html标签的内容

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    </style>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var text = $('span').text();
                alert(text);
        });
        });
    </script>
</head>
<body>

<span>jquery测试</span>
<button id="btn">点击</button>
</body>
</html>

5.4 添加属性与获取属性值

  • attr(“placeholder”,“请输入用户名”);
  • attr(“placeholder”);

5.5 移除属性

  • removeAttr()
标签
jquery
css选择器
js代码
jquery选择器
jquery事件
jquery特效
jquery动画
html代码
background
按钮
css
css样式
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!