jQuery简介:
jQuery 是一个快速、小且功能丰富的 JavaScript 库
jquery是一个JavaScript库,就是一个js文件,里面封装了大量的函数,最终返回对象jQuery特点:
写的少,做的多(Write Less,Do More)
链式编程,隐式迭代,插件丰富,开源,免费jQuery核心对象：
jQuery()或者$() 函数也是对象。jQuery.属性或者jQuery.方法()或者$.属性$.方法()
jQuery中的核心对象就是jQuery(简称为:$),实际上jQuery就是$,他们都是函数(函数也是对象)。jQuery核心函数: $(param)
作为函数调用
参数是字符串(选择器)：$('字符串')->$('button')查找并匹配标签,封装成jQuery对象
参数是DOM对象:$(DOM对象)->$(document)将DOM对象封装成jQuery独享
参数是html标签:$(html标签)->$(<p></p>)创建标签对象,封装成jQuery对象
切记:jQuery中this是DOM对象,如果要使用则需要转jQuery对象作为对象使用
$.each()：遍历数组及对象的
$.trim()： 去除字符串两端空格的
- HTML部分
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
<button id="btn">按钮</button>
<div id="dv"></div>
// 点击按钮显示当前按钮中的文字内容,同时创建一个文本框,
// jQuery对象.html()--->相当于DOM中innerHTML
$(function(){
// 获取按钮,调用点击事件
$('#btn').click(function(){
console.log($(this).html());
// 主动向目标元素插入inuput标签
$('<input type="text" />').appendTo($('#dv'));
// 目标元素被动插入inuput标签
$('#dv').append($('<input type="text" />'));
})
})
// 遍历数组,jQuery中的对象下的方法来进行遍历
let arr=[1,2,3,3,4]
$.each(arr,function(index,item){
console.log(index,item);
})
// 遍历对象
var obj = {
name: '小明'
}
$.each(obj, function (key, value) {
console.log(key, value)
})
// 干掉字符串两边的空格
console.log('===='+$.trim(' 我的天 ')+'======');
