一个经典javascript库
官网文档:https://doc.jquery.com/
第三方中文文档:https://jquery.cuishifeng.cn/
jQuery基础
jQuery特性
1 2 3 4
| $("li").css("color", "red")
$("li").css("color", "red").sibling().css("color", "");
|
jQuery 对象和 DOM 对象转换
1 2 3 4 5 6 7 8 9 10
| let box = document.getElementById("box"); let $jQueryObject = $(box);
let $domObject1 = $("div")[0]
let $domObject2 = $("div").get(0)
|
jQuery遍历
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| $("li").each(function(i, domEle){ console.log($(domEle)) })
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ) })
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ) })
|
多库共存(自定义标识符)
1
| let new = $.noConflict()
|
APIs
基本
元素
获取元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| $("选择器")
$("选择器:first") $("选择器:last") $("选择器:eq(1)")
$("选择器:checked")
$("li").first() $("li").last() $("li").eq(1)
|
通过节点关系获取元素
1 2 3 4 5
| $("li").parent() $("li").parents("选择器") $("li").children("选择器") $("li").siblings("选择器") $("li").find("选择器")
|
设置/修改元素内容
1 2 3
| $(".box").html() $(".box").text() $(".box").val()
|
创建/添加元素
1 2 3 4 5
| let li = $("<li>新建的li</li>") $("li").append(li) $("li").prepend(li) $("li").after(li) $("li").before(li)
|
删除元素
1 2 3
| $("li").remove() $("li").empty() $("li").html("")
|
样式/属性
样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| $(".box").css("样式名")
$(".box").css("样式名","属性值") $(".box").css({ color: pink, width: 200px })
$(".box").addClass("类名") $(".box").removeClass("类名") $(".box").hasClass("类名") $(".box").toggleClass("类名")
|
属性
1 2 3 4 5 6 7 8 9
| $(".box").prop("属性名") $(".box").attr("属性名")
$(".box").prop("属性名","属性值") $(".box").attr("属性名","属性值") $("box").data("属性名","属性值")
$(".box").removeAttr("属性名")
|
事件
内置事件
change()
hover([over,]out)
submit
表单提交事件
绑定与解绑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| $("li").事件(function () {})
$("li").on("事件名", function () {})
$("li").on({ 事件名1: function () {}, 事件名2: function () {} })
$("li").on("事件名1 事件名2", function () {})
$("ul").on("click", "li", function() { alert(11); });
$("li").one("事件名", function () {})
$("li").off("事件名") $("li").off("click", "li") $("li").off()
|
触发事件
1 2 3 4 5
| $("li").事件名()
$("li").trigger("事件名") $("li").triggerHandler("事件名")
|
对象
操作对象
拷贝/合并
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| const o = { uname: '李四' } const obj = { uname: 'pink', age: 18, family: { baby: '小pink' } }
$.extend(o, obj)
$.extend(true, o, obj)
|
效果
基本
show([speed,[easing],[fn]])
显示
hide([speed,[easing],[fn]])
隐藏
toggle([speed],[easing],[fn])
切换
滑动
slideDown([s],[e],[fn])
下滑
slideUp([s,[e],[fn]])
上滑
slideToggle([s],[e],[fn])
滑动切换
淡入淡出
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeTo([[speed],opacity,[easing],[fn]])
逐渐改变透明度
自定义
animate(params,[speed],[easing],[fn])
自定义动画
stop([c],[j])
停止正在运行的动画,如果写到动画或者效果前面,相当于结束上一次动画
元素尺寸
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| $('.box').width() $('.box').height()
$('.box').innerWidth() $('.box').innerHeight()
$('.box').outerWidth() $('.box').outerHeight()
$('.box').outerWidth(true) $('.box').outerHeight(true)
|
元素位置
1 2 3 4 5 6 7 8 9 10 11 12 13
| $('.box').offset().top $('.box').offset().left
$('.box').offset({ top: 100px, left: 50px })
$('.box').position().top $('.box').position().left
|
1 2 3 4
| $('.box').scrollTop()
$('.box').scrollLeft()
|
jQuery中的Ajax
$.get
$.get(url, [data], [callback])
示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| $(function () { $('#btnGET').on('click', function () { $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) { console.log(res) }) }) })
$(function () { $('#btnGETINFO').on('click', function () { $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) { console.log(res) }) }) })
|
JSONP
1 2 3 4 5 6 7 8 9 10 11 12 13
| $(function () { $.ajax({ url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'abc', success: function (res) { console.log(res) } }) })
|
$.post()
$.post(url, [data], [callback])
示例
1 2 3 4 5 6 7
| $(function () { $('#btnPOST').on('click', function () { $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) { console.log(res) }) }) })
|
$.ajax()
1 2 3 4 5 6
| $.ajax({ type: '', url: '', data: { }, success: function(res) { } })
|
示例
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 () { $('#btnGET').on('click', function () { $.ajax({ type: 'GET', url: 'http://www.liulongbin.top:3006/api/getbooks', data: { id: 1 }, success: function (res) { console.log(res) } }) }) })
$(function () { $('#btnPOST').on('click', function () { $.ajax({ type: 'POST', url: 'http://www.liulongbin.top:3006/api/addbook', data: { bookname: '史记', author: '司马迁', publisher: '上海图书出版社' }, success: function (res) { console.log(res) } }) }) })
|
提交表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <form action="/login" id="f1"> <input type="text" name="user_name" /> <input type="password" name="password" /> <button type="submit">提交</button> </form>
$(function () { $('#f1').on('submit', function (e) { alert('监听到了表单的提交事件2') e.preventDefault() let data = $('#f1').serialize() console.log(data) }) })
|
上传文件
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
| $(function () { $(document).ajaxStart(function () { $('#loading').show() })
$(document).ajaxStop(function () { $('#loading').hide() })
$('#btnUpload').on('click', function () { var files = $('#file1')[0].files if (files.length <= 0) { return alert('请选择文件后再上传!') }
var fd = new FormData() fd.append('avatar', files[0])
$.ajax({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, processData: false, contentType: false, success: function (res) { console.log(res) } }) }) })
|
通过模板引擎渲染数据
art-template
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
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/template-web.js"></script> <script src="./lib/jquery.js"></script> </head>
<body>
<div id="container"></div>
<script type="text/html" id="tpl-user"> <h1>{{name}} ------ {{age}}</h1> {{@ test}}
<div> {{if flag === 0}} flag的值是0 {{else if flag === 1}} flag的值是1 {{/if}} </div>
<ul> {{each hobby}} <li>索引是:{{$index}},循环项是:{{$value}}</li> {{/each}} </ul>
<h3>{{regTime | dateFormat}}</h3> </script>
<script> template.defaults.imports.dateFormat = function (date) { var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate()
return y + '-' + m + '-' + d }
var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }
var htmlStr = template('tpl-user', data) console.log(htmlStr) $('#container').html(htmlStr) </script> </body>
</html>
|
art-template标准语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| {{value}} {{obj.key}} {{obj['key']}} {{a ? b : c}} {{a || b}} {{a + b}}
{{@ value }}
{{if value}} 按需输出的内容 {{/if}} {{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
{{each arr}} {{$index}} {{$value}} {{/each}}
template.defaults.imports.filterName = function(value){} {{value | filterName}}
|
插件
相关网站
全屏滚动