你有多久没有用jQuery

jiezi

6 年前

jquery 虽然已经过时了，在我看来，它虽然比不上 React/Vue 这些框架，但它依旧是一个很棒的 JavaScript 库，和 lodash 之类的库一样好
一起来回顾一下吧～
<html>
<head>
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js”></script>
<script src=”https://cdn.bootcss.com/babel-core/6.1.19/browser.js”></script>
<style>
.msg {
display: inline;
border: 1px solid #aabbcc;
padding: 10px;
}
</style>

</head>

<body>
<p class=”msg”><span>123</span></p>
<input type=”text” id=”input” />
<button id=”click”>button</button>

$(document).ready(() => {

console.log(this); // window
$(“p”).click(function() {
console.log(this) // p 标签
})

var a = $(‘.msg’).text() // 所选元素的文本内容
console.log(a)
$(‘.son’).parent()
var b = $(‘.msg’).html()
console.log(b) // 所选元素的内容包含内部 html 标记

$(‘#click’).click(() => {
var c = $(‘#input’).val() // 返回表单字段的值
console.log(c)
})

var d = $(‘#input’).attr(‘type’) // 获取元素属性值
console.log(d)

$(‘.msg’).text(‘456’); // 设置所选元素的文本内容
$(‘.msg’).html(‘<span>456</span>’) // 设置所选元的内容包含 html 标记
$(‘#input’).attr(‘type’, ‘password’) // 设置所选元素的属性
$(‘#input’).attr({
‘type’: ‘text’,
‘placeholder’: ‘123’
}) // 可以同时设置多个属性

$(‘.msg’).append(‘some text append’) // 被选元素结尾插入内容
$(‘.msg’).prepend(‘some text prepended’) // 被选元素开头插入内容
// 添加若干个元素
var str1 = ‘<h3>abc</h3>’
var str2 = ‘<h1>bcd</h1>’
$(‘.msg’).append(str1, str2)

$(‘.msg’).after(‘<span>after</span>’) // 区别 appen，此方法是在元素后面追加新元素，appen 是在元素里追加
$(‘.msg’).before(‘<span>before</span>’) // 区别 prepend 同上

$(‘.father’).empty() // 删除被选元素的所有子元素相当于清空成为空标签
$(‘.father’).remove() // 删除被选元素及其所有子元素

$(‘.father’).remove(‘.child’) // 带一个过滤功能

$(‘.msg’).addClass(‘class1 class2 class3’) // 添加多个类名空格区分
$(‘.msg’).removeClass(‘class2’) // 删除指定类名
$(‘.msg’).toggleClass(‘class4’) // 删除或者添加类切换操作比如点击 button 进行切换

var e = $(‘.msg’).css(‘border’) // 返回元素的指定 css 样式
console.log(e);
$(‘.msg’).css(‘backgound-color’, ‘#ddeeff’) // 设置元素的 css 样式
$(‘.msg’).css({
‘backgound-color’: ‘#ddeeff’,
‘margin-top’: ’10px’,
}) // 和设置 html 属性一样，可以设置多个 css 属性

$(‘.msg’).width() // 获取指定元素的宽度 => 标准盒模型中 width 值
$(‘.msg’).height() // 标准盒模型中 height 值
// 区别 innerWidth outerWidth … eg
$(‘#click’).width(50).height(50) // 设置指定元素的宽高

$(document).width() // 浏览器的宽度
$(document).height() // 浏览器的高度

// 获取被选元素的直接父元素
$(‘.c’).parent().css(‘border’, ‘1px solid #ddeeff’)

var f = $(‘.c’).parents(); // 获取被选元素的所有祖先元素一直到 html
console.log(f)
$(‘.c’).parents(‘.example’) // 同样加一个过滤
$(‘.c’).parentsUntil(‘html’) // .c 和 html 之间的元素

$(‘.b’).children() // 被选元素的所有直接子元素，注意直接子元素可以有多个，但直接父元素确只能有一个
$(‘.b’).children(‘.c’) // 同样加一个过滤

$(‘.b’).find(‘span’) // 返回被选元素的所有后代元素是 span 的元素
$(‘.b’).find(‘*’) // 同样加一个 css 修饰器即为返回所有的后代元素

$(‘.c’).siblings(); // 返回被选元素的所有同胞元素同样可以过滤下
$(‘.c’).next() // 返回被选元素的下一个同胞元素
$(‘.c’).nextAll() // 返回被选元素后跟随的同胞元素

// 类似还有 prev() prevAll() prevUntil()

$(‘p’).filter(‘.a’) // 返回类名为 a 的 p 元素
$(‘p’).not(‘.a’) // 返回类名不为 a 的 p 元素

// Jquery 加载
//$(‘.f’).load(‘./text.txt’)

// Ajax
/*
$.get(‘http://apis.juhe.cn/mobile/get?phone=17854234676&key=87b3fd95fb8a004442ca5195304a6954’,(data, status) => {
console.log(data, status);
})

$.post(‘url’, {data}, (data, status) => {
})
*/
// Ajax 请求
$.ajax({
type: ‘get’,
data: {}, // post 请求参数
url: ‘http://apis.juhe.cn/mobile/get?phone=17854234676&key=87b3fd95fb8a004442ca5195304a6954’,
dataType: ‘jsonp’,
success: (data) => {
console.log(data);
},
error: (err) => {}
})

// 事件
$(‘#input’).keyup(function() {
console.log(123);
})

})

</script>
</html>