基本Jquery学习笔记

最新推荐文章于 2020-06-18 14:25:26 发布

戴夫爱吃胡萝卜

最新推荐文章于 2020-06-18 14:25:26 发布

阅读量172

点赞数 1

分类专栏： java web 文章标签： js jquery java

本文链接：https://blog.csdn.net/linbomm/article/details/106071810

版权

java web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、核心函数

jQuery( callback )：绑定一个在 DOM 文档载入完成后执行的函数

$(function () {
	alert("hello jquery")
})

jQuery(selector, [context])：接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
jQuery(html,[ownerDocument])：使用原始 HTML 的字符串来创建 DOM 元素
dom对象 ——》 jquery对象 $(dom)
jquery对象 ——》dom对象 jquery[0]

二、选择器

三、文档操作

（1）获得/设置内容

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值

（2）添加新的 HTML 内容

内部插入：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容

外部插入：

after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

（3）删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

（4）遍历

each() - 对 jQuery 对象进行迭代，为每个匹配元素执行函数。
parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）

四、dom元素

index() - 返回指定元素相对于其他指定元素的 index 位置。
size() - 返回被 jQuery 选择器匹配的元素的数量。

五、css

css() - 设置或返回匹配元素的样式属性

六、事件

blur() - 失去焦点
focus() 获得焦点
click() - 点击按钮
mouseover() - 鼠标悬停
mouseout() - 鼠标移除
hover() - 鼠标悬停和移除
change() - 当元素的值发生改变时，会发生 change 事件
one() - 每个元素只能触发一次该处理器
toggle() - 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

七、AJAX

（1） $.post() 与 $.get()

在这里插入图片描述

（2）fastJson

// 对象转json
String s = JSONObject.toJSONString(people);

例子1：简单判断用户名是否存在

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script>
      $(function () {
        // 失去焦点
        $("#username").blur(function () {
          var url="/test"
          var usernamevalue=$("#username").val()
          // 设置异步请求
          $.post(url,{"username":usernamevalue},function (data) {
            $("#span1").html(data)
          },"html")
        })
        })

    </script>
  </head>
  <body>
    用户名：<input type="text" id="username"><span id="span1"></span>
  </body>
</html>

servlet

@WebServlet("/test")
public class servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解决中文乱码
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        // 接收参数
        String name = req.getParameter("username");
        String str = "aaa";
        if (str.equals(name)){
            resp.getWriter().write("<font color='red'>已占用</font>");
        }else if ("".equals(name)){
            resp.getWriter().write("<font color='red'>检测为空</font>");
        }
        else{
            resp.getWriter().write("<font color='green'>可使用</font>");
        }
    }
}

例子2：根据省份获取市

servlet

@WebServlet("/test")
public class Servlet1 extends HttpServlet {
    private HashMap<Province,ArrayList<City>> provinces;

    @Override
    public void init() throws ServletException {
        provinces = new HashMap<>();
        // 省
        Province p1 = new Province(1, "山东");
        Province p2 = new Province(2, "山西");
        // 市
        City c1 = new City(1, "青岛市");
        City c2 = new City(2, "济南市");
        ArrayList<City> cities1 = new ArrayList<>();
        cities1.add(c1);
        cities1.add(c2);
        City c3 = new City(1, "大同市");
        City c4 = new City(2, "太原市");
        ArrayList<City> cities2 = new ArrayList<>();
        cities2.add(c3);
        cities2.add(c4);
        // 封装为set集合
        provinces.put(p1, cities1);
        provinces.put(p2, cities2);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解决中文乱码
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        String choose = req.getParameter("choose");
        switch (choose){
            case "province":
                // 得到省份set集合
                Set<Province> keySet = provinces.keySet();
                String s = JSONObject.toJSONString(keySet);
                resp.getWriter().write(s);
                break;

            case "city":
                String name = req.getParameter("name");
                Set<Province> keySet1 = provinces.keySet();
                for (Province province : keySet1) {
                    if (province.getName().equals(name)){
                        // 根据匹配的name获取list集合
                        ArrayList<City> cities = provinces.get(province);
                        String s1 = JSONObject.toJSONString(cities);
                        resp.getWriter().write(s1);
                    }
                }
                break;
            default:
                break;
        }
    }
}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            // 当页面加载完毕，需要得到省份信息
            var url1='/test?choose=province'
            $.post(url1,function (data) {
                // 获取省份名称
                $(data).each(function () {
                    var provinces=$("<option></option>")
                    provinces.append(this.name)
                    $('#province').append(provinces)
                })
            },"json")

            // 当省份下拉列表发生改变
            $('#province').change(function () {
                // 恢复初始状态
                $('#city').html("<option>---请选择市---</option>")
                var url2='/test?choose=city'
                $.post(url2,{"name":$(this).val()},function (data) {
                    // 获取市名称
                    $(data).each(function () {
                        var cities=$("<option></option>")
                        cities.append(this.name)
                        $('#city').append(cities)
                    })
                },'json')
            })
        })
    </script>
</head>
<body>
    <select id="province">
        <option>---请选择省份---</option>
    </select>省
    <select id="city">
        <option>---请选择市---</option>
    </select>市

</body>
</html>

戴夫爱吃胡萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本Jquery学习笔记

一、核心函数jQuery( callback )：绑定一个在 DOM 文档载入完成后执行的函数$(function () { alert("hello jquery")})jQuery(selector, [context])：接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器jQuery(html,[ownerDocument])：使用原始 HTML 的字符串来创建 DOM 元素...
复制链接

扫一扫