Ammar's Blog
微信号：aicjaish
首页 标签 分类 归档 留言 关于
jQuery
|前端JS
字数总计: 4.8k|阅读时长: 21 分钟

jQuery 简介

  1. jQuery 是一个 JavaScript 库
  2. jQuery 极大地简化了 JavaScript 编程
  3. jQuery 库包含以下特性

jquert.min.js 表示迷你版，也就是去掉缩进的版本

console.log($) 控制台有值，说明导入成功

1
2
3
4
5
6
7
8
9
$(function () {
	$('#btn').click(function () {
		$('#content').toggle(2000); // 带动画效果的显示和隐藏元素
	});
});

等价于 window.onload = function () {
	
}

jQuery 对象，习惯以 $ 开头

$ === jQuery true

1
2
3
4
// DOM 对象转 jQuery 对象
$(DOM对象)
// jQuery -> DOM jQuery对象第0个元素就是 DOM 对象
$btn.get(0)

jQuery 常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 获取 jQuery 中包含 DOM 的个数
$(function () {
	$('p').size();
});
// 获取 id 为 username 元素的 value 属性值
$(function () {
	$('#username').val();
});
// 设置 id 为 username 元素的 value 属性值为 "sss"
$(function () {
	$('#username').val('sss');
});
// 对比 h1 元素的内容和纯文本的区别
$(function () {
	$('#h1').html();
	$('#h1').text();
});
// 把 h1 元素内容的颜色改为黄色
$(function () {
	$('#h1').css('color', 'green');
});

如果通过 jQuery 方法获取页面元素，没有查找到，返回值不是 null，而是返回一个空数组[]，所以判断 jQuery.lenth != 0 来判断是否获取到元素

jQuery 语法

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

格式说明:

  1. 美元符号定义 jQuery
  2. 选择符(selector):”查询”和”查找”HTML 元素
  3. jQuery 的 action():执行对元素的操作,是一些方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>jquery语法</title>
</head>
<style>
.disp {
    width: 300px;
    height: 100px;
    border: 2px solid red;
    font-size: 28px;
    text-align: center;
}
#btn {
    width: 300px;
    height: 10px;
    font-size: 18px;
}
</style>
<body>
    <div class="disp">我就是我不一样的烟火</div>
    <button id="btn">点我</button>
</body>
<script>
    // 1.标准格式，
    $(document).ready(function(){
        // 写js或者jquery代码
    });
    // 2.jquery的简写
    $(function(){
        // 找到元素添加样式
        $("#btn").css("color", "red");
        // 找到元素添加事件
        var flag = false;
        $("#btn").click(function(){
            if (flag) {
                $(".disp").show(); 
                flag = false;
            } else {
                $(".disp").hide(); // 隐藏元素
                flag = true;
            }
        });
    });


</script>
</html>

jQuery选择器

jQuery 选择器允许对元素组或单个元素进行操作,有 4 种基本选择器 jQuery 使用 CSS 选择器来选取 HTML 元素

  1. jQuery 元素选择器

    • $("p")选取

      元素

    • $("p.mm")选取所有 class=”mm”的

      元素

    • $("p#demo")选取所有 id=”demo”的

      元素

  2. jQuery 类选择器

    • $(".dv");
    • $(".cc");

  3. jQuery 的 id 选择器

    • $("#pp");
    • $("#dd");

  4. jQuery 属性选择器

    • jQuery 使用 XPath 表达式(一种路径)来选择带有给定属性的元素;
    • $("[href]")选取所有带有 href 属性的元素;
    • $("[href='#']")选取所有带有 href 值等于”#”的元素;
    • $("[href!='#']")选取所有带有 href 值不等于”#”的元素;
    • $("[href^='.jpg']")/$("[href$='.jpg']")选取所有 href 值以”.jpg”开头/结尾的元素;

  5. jquery组合选择器

1
2
3
4
5
1. 一般组合选择器
div, p {
	background: green;
	color: red;
}

表明：p和div都有这两个属性

1
2
3
4
5
2. 嵌套组合选择器
div p {
	background: green;
	color: red;
}

空格隔开表明在div 这个父级下的 p 标签才会被改变属性

1
2
3
4
5
6
7
8
9
10
11
12
3. 子选择器
div>p {
	background: green;
	color: red;
}
$('#myul > li').size; // 4
$('#myul > li').selector; // #myul > li
$('#myul > li').get(); // [li, li.selected, li, li, li.selected]   li 数组
$('#myul > li').get(0); // 4
$('#myul > li').get(1); // 4
$('#myul > li').get(2); // 4
$('#myul > li').get(3); // 4

大于号表明 只有父标签为div的p标签才会被设置属性

1
2
3
4
5
4. 相邻同级选择器
div+p {
	background: green;
	color: red;
}

+号表明 只有相邻的同级的标签为div的p标签才会被设置属性

1
2
3
4
5
6
7
5. 属性选择器
基本选择器[属性]
	
p[title] {
	background: green;
	color: red;
}

p 标签，只有有title 属性的标签的属性才会被改变
p[title=qiuqiu] 表示title值为qiuqiu的标签才会改变属性
p[title~=qiuqiu] 表示title值包含qiuqiu的标签才会改变属性
p[title^=qiuqiu] 表示title值以qiuqiu开始的标签才会改变属性
p[title$=qiuqiu] 结束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(this);当前元素
$("#dv1>p");id 号为 dv1 的所有子元素 p
$("#dv1 p");id 号为 dv1 的所有后代 p 元素
$("#dv1+div");id 号为 dv1 的第一个兄弟元素 div
$("#dv1~div");id 号为 dv1 的所有兄弟元素 div
$("#dv1,#dv2");id 号为 dv1 与 dv2 的元素
$("p");所有<p>元素
$("p.mm");所有 class="mm"的<p>元素
$(".mm");所有 class="mm"的元素
$("#mm");id="mm"的元素
$("ul li:first");每个<ul>的第一个<li>元素 
$("[href$='.jpg']");所有带有以".jpg"结尾的属性值的 href 属性
$("div#intro .head");id 为"intro"的<div>元素中的所有 class="head"的元素 
$("h2:nth-of-type(2)");找到父元素中第二个 h2 元素 //prev()找上一个元素,找到 id 号为 pid 的元素的上一个兄弟元素,并设置样式 
$("#pid").prev().css("color","green");
//next()找下一个元素,找到 id 号为 pid 的元素的下一个兄弟元素,并设置样式 
$("#pid").next().css("color","red");
//eq()根据索引号找,找到 id 号为 dv 的元素中第 2 个 p 子元素,并设置样式,eq 是根据索引号找元素,索引号从 0 开始

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 获取 ul 的第一个 li 元素 (:first)
$('ul li:first');
// 获取每一个 ul 的第一个 li 元素 (:first-child)
$('ul li:first-child');
// 获取 ul 的最后一个 li 元素 (:last)
$('ul li:last');
// 获取 每一个 ul 的最后一个元素 (:last-child)
$('ul li:last-child');
// 表格隔行变色
$('tr:odd').css('background-color', 'green');
$('tbody > tr:odd').css('background-color', 'green');
// 获取所有的奇/偶数的 li 元素(:odd/:even)
$('li:odd')
// 获取每个 ul 的奇/偶数的 li 元素(:nth-child(?))
$('ul li:nth-child(2n)')
$('ul li:nth-child(even)')
$('ul li:nth-child(odd)')
$('ul li:nth-child(3n)')
$('ul li:nth-child(2)')
$('ul li:nth-child(3n+1)')
$('ul li:nth-child(3n+2)')
// 获取 input 元素中 id 以 check 开头的元素 ([attr^=value])
$('input[id$^='check']');

jQuery HTML DOM

jQuery 的 HTML DOM 操作

  1. jQuery 获得内容和属性

    jQuery 的 DOM 操作(Document Object Model 文档对象模型)

    • text():设置或返回所选元素的文本内容
    • html():设置或返回所选元素的内容(包括 HTML 标记)
    • val():设置或返回表单字段的值,要与 js 中的 value 对比
    • attr():设置/改变内容和属性值

参考代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#btn1").click(function(){
    //返回所选元素的文本内容 
    alert("Text: " + $("#test").text());
}); 

$("#btn2").click(function(){
    //返回所选元素的内容 
    alert("HTML: " + $("#test").html());
}); 

$ ("#btn1").click(function(){
    //返回表单字段的值 
    alert("Value:" + $("#test").val());
}); 

//获取某一个属性值
$("button").click(function(){ 
    alert($("#aa").attr("href");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script src="/jquery/jquery-1.11.1.min.js"></script> <script>
$(document).ready(function(){ 
    $ ("#btn1").click(function(){
        $("#test1").text("Hello me!");
    });

    $("#btn2").click(function(){
        $("#test2").html("<b>Hello me!</b>");
    });

    $("#btn3").click(function(){
        $("#test3").val("今天天气不错"); 
    });
});

$("#test4").click(function(){
    //设置属性值 
    $("#aa").attr("href","http://www.baidu.com");
});
</script>
</head>
<body>
<p id="test1">这是段落</p>
<p id="test2">这是另一个段落</p>
<p>Input field:<input type="text" id="test3" value="Mickey Mouse"></p> <a href="#" id="aa">我走了</a>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
  H5 全栈实战教程 v1.2
<button id="btn3">设置值 val</button>
<button id="btn4">设置属性值</button> 
</body>

jQuery 添加元素

添加新内容的四个

  • append():在被选元素的结尾插入内容;
  • prepend():在被选元素的开头插入内容
  • after():在被选元素之后插入内容(元素之外)
  • before():在被选元素之前插入内容(元素之外)

参考代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script> <script>
function appendText(){
    var txt1="<p>我是 p1</p>"; //以 HTML 创建新元素
    var txt2=$("<p></p>").text("我是 p2"); //以 jQuery 创建新元素 
    var   txt3=document.createElement("p");
    txt3.innerHTML="我是 p3"; //通过 DOM 来创建文本 
    $("body").append(txt1,txt2,txt3);//追加新元素
}
</script>
</head>
<body>

<p>这是一个段落文本!</p>
<button onclick="appendText()">追加文本</button>
</body>

jQuery 删除元素

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

    • remove()删除被选元素(及其子元素),可能传参,指定删除某一批中的某些元素
    • empty()从被选元素中删除子元素,元素本身保留,不要传参

参考代码

1
2
$("#div1").remove(); $("#div1").empty();
//删除 class="italic"的所有<p>元素 $("p").remove(".italic");

jQuery 增加删除类选择器

jQuery 获取并设置 CSS 类

就是类属性设置,通过 jQuery 的方法,可以很容易地对元素的 CSS 类进行动态操作, 就是对元素的 class 属性进行动态设置

  • jQuery 方法
    • (1)addClass()向被选元素添加一个或多个类
    • (2)removeClass()从被选元素删除一个或多个类
    • (3)toggleClass()对被选元素进行添加/删除类的切换操作
    • (4)css()方法,设置或返回样式属性
1
2
3
4
5
6
7
8
9
10
11
<!--写个样式表，后面实例会用到-->

<style>
.text {
    font-weight:bold;
    font-size:xx-large;
}
.red {
    color:red;
}
</style>
1
2
3
4
5
6
7
8
9
$("button").click(function(){ 
    $("h1,h2,p").addClass("red"); 
    $("div").addClass("text"); 
});


$("button").click(function(){ 
    $("#div1").addClass("text red"); 
});

可以在 addClass()方法中规定多个类，用空格隔开

在不同的元素中删除指定的 class 属性

1
2
3
$("button").click(function(){ 
    $("h1,h2,p").removeClass("red"); 
});

jQuery 的 toggleClass()方法

1
2
3
$("button").click(function(){ 
    $("h1,h2,p").toggleClass("red"); 
});

jQuery 遍历

Query 遍历(其实就是找元素)

意为”找所有”,用于根据其相对于其他元素的关系来”查找”(或选取)HTML 元素,以某项选择开始,并沿着这个选择移动,直到抵达要找的元素为止,图示树形结构图

jQuery 事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/jquery/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('#btn1').bind('click', function () {
                alert(1);
            })
            $('.mybtn').bind('click', function () {
                alert(23);
            })

            // 用的最多
            $('#btn4').click(function () {
                alert(4);
            });

            // 动态添加事件处理函数
            $('#btn5').on('click', function () {
                alert(5);
            })

            $('#btns > button').click(function () {
                console.log(this);
                console.log($(this));
            })
            // 动态添加事件处理函数
            // 这个事件函数是绑定在父类元素 div，上，事件触发是里面的 button 元素
            // 冒泡被监听到。
            $('#btns').on('click', function () {
                console.log(this);
            })

            // 加入点击按钮添加一个新的按钮，要为新的按钮绑定点击事件，需要用到 on
            $('#btn0').click(function () {
                $('#btns').append('<button id="btn10">按钮10</button>');
            })
        });
    </script>
</head>
<body>
<button id="btn0">按钮0</button>
<button id="btn1">按钮1</button>
<button id="btn2" class="mybtn">按钮2</button>
<button id="btn3" class="mybtn">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<div id="btns">
    <button id="btn6">按钮6</button>
    <button id="btn7">按钮7</button>
    <button id="btn8">按钮8</button>
    <button id="btn9">按钮9</button>
</div>

</body>
</html>

分页插件

下载地址

1
2
3
4
5
6
7
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="/js/plugins/bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<script type="text/javascript" src="/js/plugins/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap/js/bootstrap.js"></script>
<!-- 分页插件 -->
<script type="text/javascript" src="/js/plugins/page/jquery.twbsPagination.min.js"></script>

导入js库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
    $(function () {
        if ((${result.totalPage}) > 0) {
            $('#pagination-demo').twbsPagination({
                initiateStartPageClick: false,
                totalPages: ${result.totalPage}, // 总页数
                visiblePages: 7, // 显示页码数
                startPage: ${result.currentPage},// 当前页
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '尾页',
                onPageClick: function (event, page) {
                    // 点击分页的时候会跳转到这里，page 当前点击的页面
                    $('#currentPage').val(page)
                    $('#searchForm').submit()
                    // $('#page-content').text('Page' + page);
                }
            })
        }
    })
</script>

<div style="display: flex; display: -webkit-flex; justify-content: center">
    <ul id="pagination-demo" class="pagination"></ul>
</div>

attr、prop、data

  1. data-开头的属性，使用 data 方法获取属性值，因为若属性时 JSON 字符串，会自动转为 JS 对象
  2. 如果 checked selected 这种单属性，使用 prop 方法
  3. 如果是 value 属性，使用 val 方法。
  4. 如果是样式，使用 css 方法，addClass。
  5. 其他使用 attr

需要记住的方法：

2019-08-22 at 11.17 A

foreach 实现的底层原理

函数式编程，foreach、map 底层实现

foreach

1
2
3
4
5
6
7
8
9
10
11
12
// foreach 底层原理  这句代码的意思是给 Array 添加新的方法
Array.prototype.foreach2 = function (fn) {
    for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
    }
}

var arr = ['1', '2', '3']
arr.forEach(function (value, index) {
    console.log(value);
    console.log(index);
})

map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// map 底层原理
Array.prototype.map2 = function (fn) {
    var newArr = []
    for (var i = 0; i < this.length; i++) {
        var result = fn(this[i], i, this)
        newArr.push(result)
    }
    return newArr
}

var newA2 = arr.map2(function (value, index, array) {
    return '1' + value
})

console.log(newA2);

应用

  • 全选/反选

argument 全局对象可以拿到函数中所有的参数。

1
2
3
4
5
6
function checkall() {
	$('input[name=hobby]').prop('check', function(i, currentCheckedValue){
		// i 表示索引， currentCheckedValue 表示值， 参数可以在 arguements 参数中找到
		return !currentCheckedValue; // 会影响 input[name=hobby] 的选中状态
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(function () {

    var checkHobbyState = function() {
        // 只有4个爱好选中时 修改全选的标识
        var sum = true;
        $('input[name=hobby]').each(function (index, domEle) {
            sum = sum && $(domEle).prop('checked')
        })
        $('#checkAll').prop('checked', sum)
    }

    $('#checkAll').change(function () {
        $('input[name=hobby]').prop('checked', $(this).prop('checked'))
    })
    
    $('#btn_checkAll').click(function () {
        $('input[name=hobby]').prop('checked', true)
        checkHobbyState()
    })

    $('#btn_checkUnAll').click(function () {
        $('input[name=hobby]').prop('checked', false)
        checkHobbyState()
    })

    $('#btn_checkReverse').click(function () {
        $('input[name=hobby]').prop('checked', function (index, checkedValue) {
            return !checkedValue
        })
        checkHobbyState()
    })
})
  • 移动子元素到另一个父元素
1
2
3
4
5
6
7
8
9
// id2 是 target，id1 是 src
function moveSelected(id1, id2) {
    $('#' + id2).append($('#' + id1 + '> option:selected'))
}

// id2 是 target，id1 是 src
function moveAll(id1, id2) {
    $('#' + id2).append($('#' + id1 + '> option'));
}

异步请求

在执行一些请求时，需要根据响应结果做一些事情，这时候直接访问后台资源刷新页面就不是特别合适。最好使用异步请求，即只通过 Ajax 请求，获取数据，而不重新生成页面。

这时就可以通过后台响应的结果信息使用 js 做一些操作。

解决方案：

  1. 自己手动使用 ajax 发送异步请求。详情见 Ajax实现登录
  2. 使用 jquery-form 插件

使用 jquery-form 插件需要引入库
<script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>

情况一：表单自带提交按钮

1
2
3
4
5
6
7
8
9
$(function() {
	$("#testForm").ajaxForm(function(data){
		console.debug(data)
	})
})

<form id="testForm" action="/text.do" method="post">
	<input type="submit" value="提交">
</form>

情况二：表单不带有提交按钮，而是普通按钮，需要手动提交

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
	$("#btn_test").click(function(){
		$("#testForm").submit();
	})

	$("#testForm").ajaxForm(function(data){
		console.debug(data)
	})
})

<form id="testForm" action="/text.do" method="post">
	<input type="submit" value="提交">
</form>

jQuery 清空表单内容

1
2
// 利用 dom 表单的 reset() 方法
$('#editForm')[0].reset()

jQuery 完成表单校验

jquery 库，jquery-validation/jquery.validate.min.js
自定义提示语句

messages_cn.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.extend(jQuery.validator.messages, {
      required: "必选字段",
		remote: "请修正该字段",
		email: "请输入正确格式的电子邮件",
		url: "请输入合法的网址",
		date: "请输入合法的日期",
		dateISO: "请输入合法的日期 (ISO).",
		number: "请输入合法的数字",
		digits: "只能输入整数",
		creditcard: "请输入合法的信用卡号",
		equalTo: "请再次输入相同的值",
		accept: "请输入拥有合法后缀名的字符串",
		maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
		minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
		rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
		range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
		max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
		min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

引入和使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/message/messages_cn.js"></script>

// 数据校验
$('#editForm').validate({
    //验证逻辑
    rules: {
        //单个验证
        //name:"required"
        //多个验证
        name: {
            required: true,
            minlength: 1/*,
            remote:{
                url:"/employee/checkname.do",
                type:"post",
                data:{ //发起请求参数
                    name:function(){
                        return $("#name").val();
                    },
                    id:function () {
                        //需要id：原因：编辑时，用户已经存在了
                        //需要使用id来区分编辑还是添加操作
                        return $("#id").val();
                    }
                }
            }*/
        },
        password: {
            required: true,
            rangelength: [4, 6]
        },
        repassword: {
            equalTo: "#password"
        },
        age: {
            digits: true,
            range: [18, 65]
        },
        email: {
            required: "邮箱必填",
            email: "邮箱格式不正确"
        }
    },
    //验证失败后提示
    messages: {
        //可以不写，使用默认的
        name: {
            required: "用户必填",
            minlength: "用户名长度必须大于5个"
        }
    },
    submitHandler:function(form) {
        $('#editForm').ajaxForm(function (data) {
            if (data.success) {
                $.messager.confirm("温馨提示", "保存成功", function () {
                    window.location.href = "/employee/list"
                })
            } else {
                $.messager.alert("温馨提示", data.message)
            }
        })
    }
})

上述校验只有对原生的和同步请求有效。对异步请求和插件提交请求无效。
没有明确调用 submit() 或者按钮不是 submit 按钮，默认都无效

1
2
3
4
5
6
7
8
9
10
11
submitHandler:function(form) {
    $('#editForm').ajaxForm(function (data) {
        if (data.success) {
            $.messager.confirm("温馨提示", "保存成功", function () {
                window.location.href = "/employee/list"
            })
        } else {
            $.messager.alert("温馨提示", data.message)
        }
    })
}

覆写 submitHandler 才可以进行校验并自己提交，必须自己提交因为，submitHandler 已经覆盖了原来的方法，无法自动提交了。

编辑回显数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(".btn_input_modal").click(function () {
    //弹出模态框
    $("#editModal").modal("show");
    //修改模态框标题
    $(".modal-title").html("移交历史添加");
    //数据复原
    $("#editForm")[0].reset();

    //移交历史回显数据
    var data = $(this).data("json");
    if (data) {
        $(".modal-title").html("移交历史编辑");
        $("input[name='id']").val(data.id);
        $("input[name='name']").val(data.name);
        $("input[name='sn']").val(data.sn);
    }
})

$(".inputBtn").click(function () {
    var pid = '${parentId}';
    // 修改模态框标题
    $(".modal-title").html("数据字典明细添加");
    // 数据复原
    $("#editForm")[0].reset();
    // 字典目录
    var parentName = $("#dicDirUl li.active").find("a").html();
    $("#editForm input[name='parentName']").val(parentName);
    // 弹出模态框
    $("#editModal").modal("show");
    // 数据字典回显数据
    var data = $(this).data("json");
    if(data){
        $(".modal-title").html("数据字典明细编辑");
        $("#editForm input[name='id']").val(data.id);
        $("#editForm input[name='title']").val(data.title);
        $("#editForm input[name='sequence']").val(data.sequence);
    }
})

<div class="  col-sm-3">
    <div class="panel panel-info">
        <div class="panel-heading"><strong>字典明细</strong></div>
        <ul class="list-group" id="dicDirUl">
            <#list dictionary.list as d>
                <li class="list-group-item"><a class="dicDir" data-pid="${d.id}" href="javascript:;">${d.title}</a></li>
            </#list>
            <script>
                $(".dicDir[data-pid='${parentId}']").closest("li").addClass("active");
                $(".dicDir[data-pid='${parentId}']").css("color","white")
            </script>
        </ul>
    </div>
</div>
文章作者: Ammar
文章链接: http://lizhaoloveit.cn/2019/03/31/jQuery/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ammar's Blog！
JavaScript
打赏
  • 微信
  • 支付宝
评论
繁