jQuery简介
1.为什么要使用jquery?
HTML 元素选取(选择器),HTML 元素操作,CSS 操作,HTML 事件处理,JS 动画效果,链式调用 a().b().c()…,读写合一,浏览器兼容,易扩展插件,ajax 封装
2.如何使用jquery?
引入jquery库
<!-- 引入jQuery -->
<!--服务器本地库-->
<script src="js/jquery-3.6.0.js"></script>
<!--CDN远程库-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
使用jquery
● jQuery核心函数:
/
j
Q
u
e
r
y
●
j
Q
u
e
r
y
核
心
对
象
:
执
行
/jQuery ● jQuery核心对象:执行
/jQuery●jQuery核心对象:执行()返回的对象
// 绑定文档加载完成的监听
$(function () {
// 绑定监听事件
var $btn02 = $("#btn02");
$btn02.click(function () {
var username = $("#username").val();
username && alert(username);
});
})
jQuery的优势
// jQuery核心代码
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)
jQuery 核心函数
简称:jQuery函数(
/
j
Q
u
e
r
y
)
,
j
Q
u
e
r
y
库
向
外
直
接
暴
露
的
就
是
/jQuery),jQuery库向外直接暴露的就是
/jQuery),jQuery库向外直接暴露的就是/jQuery
引入jQuery库后,直接使用即可
● 当函数用:
(
x
x
x
)
●
当
对
象
用
:
(xxx) ● 当对象用:
(xxx)●当对象用:.xxx()
// jQuery函数:直接可用
console.log($, typeof $); // ƒ ( selector, context ) {} function
console.log(jQuery === $); // true
jQuery 核心对象
简称:jQuery对象
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
使用jQuery对象:$obj.xxx()
// jQuery对象:执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true
jQuery函数的使用
作为一般函数调用:$(param)
- 参数为函数:当 DOM 加载完成后,执行此回调函数
- 参数为选择器字符:查找所有匹配的标签并将它们封装成jQuery对象
- 参数为 DOM 对象:将 dom 对象封装成jQuery对象
- 参数为 html 标签字符串(用得少):创建标签对象并封装成jQuery对象
作为对象使用:$.xxx()
● $.each():隐式遍历数组
● $.trim():去除两端的空格
// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框
// 1、参数为函数:当 DOM 加载完成后,执行此回调函数
$(function () { // 绑定文档加藏完成的监听
// 2、参数为选择器字符:查找所有匹配的标签并将它们封装成`jQuery`对象
$("#btn").click(function () {
// alert(this.innerHTML); // this是什么?发生事件的dom元素(<button>)
// 3、参数为 DOM 对象:将 dom 对象封装成`jQuery`对象
alert($(this).html());
// 4、参数为 html 标签字符串(用得少):创建标签对象并封装成`jQuery`对象
$('<input type="text" name="msg3"><br/>').appendTo("div");
});
// 需求2.遍历输出数组中所有元素值
var arr = [3, 7, 4];
$.each(arr, function (index, item) {
console.log(index, item); // 0 3 1 7 2 4
});
// 需求3.去掉“my atguigu”两端的空格
var str = " my atguigu ";
console.log('===' + str + '==='); // === my atguigu ===
console.log('===' + str.trim() + '==='); // ===my atguigu===
console.log('===' + $.trim(str) + '==='); // ===my atguigu===
})
jquery对象的使用
即执行jquery核心函数返回的对象
jquery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
jquery对象拥有很多有用的属性和方法,让程序员能方面操作dom
属性和方法
基本行为:操作标签的基本方法
属性:操作内部标签的属性或值
css:操作标签的样式
文档:对标签进行增删改查操作
筛选:根据指定的规则过滤内部的标签
事件:处理事件监听相关
效果:实现一些动画效果
基本行为:
size()/ length :包含的Dom元素的个数
[index] / get(index):得到对应位置的Dom元素
each():遍历包含的所有Dom元素
index():得到所在兄弟元素中的下标
// 需求1.统计一共有多少个按钮
// `size()`/`length`:包含的 DOM 元素个数
var $buttons = $('button');
console.log($buttons.length); // 4
// 需求2.取出第2个button的文本
console.log($('button:nth-child(2)').text()); // 测试二
// `[index]`/`get(index)`:得到对应位置的 DOM 元素
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); // 测试二 测试二
// 需求3.输出所有button标签的文本
// `each()`:遍历包含的所有 DOM 元素
// $buttons.each(function (index, domEle) {
// console.log(index, domEle.innerHTML); // 0 "测试一" 1 "测试二" 2 "测试三" 3 "测试四"
// });
$buttons.each(function () {
console.log(this.innerHTML); // 测试一 测试二 测试三 测试四
});
// 需求4.输出’测试三’按钮是所有按钮中的第几个
console.log($("#btn3").index()); // 2
伪数组
object对象,length对象,数值下标属性,没有数组特别的方法:foreach(),push(),pop(),splice()
// 伪数组
console.log($buttons instanceof Array); // false
//自定义一个伪数组
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i];
console.log(i, obj); // 0 "atguigu" 1 123
}
console.log(weiArr.forEach, $buttons.forEach); //undefined undefined
end