一、初识jQuery:
javaScript代码端:
<script>
// 方式一:使用原生的js实现功能
window.onload = function () {
var btn01 = document.getElementById('btn01');
btn01.onclick = function () {
alert(document.getElementById('username').value);
}
}
</script>
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script>
$(function () {
$('#btn02').click(function () {
alert($('#username').val())
})
})
</script>
HTML
<!--
需求:点击"确定"按钮,提示输入的值
-->
用户名:<input type="text" id="username">
<button id="btn01">确定(原生版本)</button>
<button id="btn02">确定(jQuery版)</button>
二、jQuery核心:两把利器(对象/函数)
1.jQuery核心函数
简称:jQuery函数($/jQuery)
jQuery库向外直接暴漏的就是$/jQuery(源代码为window.$=window.jQuery=jQuery);
引入jQuery库后,直接使用$即可.
当函数用:$(xxx)
当对象用:$.xxx()
2.jQuery核心对象
简称jQuery核心对象
得到jQuery对象,执行jQuery函数返回的就是jQuery对象。
使用jQuery对象:$obj.xxx()jQ
/*引入jQuery库*/
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script>
console.log(typeof $);//$是一个function
console.log($ === jQuery);//true $与jQuery等同
console.log($ === window.$);//true $是一个全局函数
console.log(typeof $());//object 这个对象就是jQuery对象
$('button').click(function () {
alert(this.innerHTML);
})
</script>
<button>测试</button>
三、jQuery核心函数
1.作为一般函数调用:$(param)
1>.参数为函数:当DOM加载完后,执行此回调函数
2>.参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象
3>.参数为DOM对象:将dom对象封装成jQuery对象
4>.参数为html标签字符串(用的少):创建标签对象并封装成jQyery对于对象
2.作为函数使用:$.xxx()
1>.$.each():隐式遍历数组
2>.$.trim():去除两端的空格
<script src="./js/jquery-1.10.1.js"></script>
<script>
/*
需求1:点击按钮:显示按钮的文本,显示一个新的输入框
需求2:遍历输出数组中所有的元素值
需求3:去掉“my home”两端的空格
*/
/* 需求1:点击按钮:显示按钮的文本,显示一个新的输入框*/
//1).参数为函数:当dom加载完成后,执行其中的函数 回调函数
$(function () {
//2.参数为选择器(selector)字符串:查找所有匹配的标签,并将它们封装成jQuery对象
var $btn = $('#btn');
$btn.click(function () {
//显示按钮的文本
//this就是发生事件的dom元素对象也就是button
//3)参数为DOM对象,将dom对象封装成jQuery对象
var text = $(this).html();
alert(text);
//显示一个新的输入框
$('<input type="text" name="msg3"></br>').appendTo('div')
})
})
// 需求2:遍历输出数组中所有元素值
var arr = [123, "my home", true];
//1)$.each():隐式遍历数组
$.each(arr, function (index, item) {
console.log('第' + (index + 1) + "个元素的值为" + item);
})
//需求3:去掉my home两端的空格
var str = " my home ";
//2).$.trim();去除两端的空格
console.log(str.trim() === 'my home');//true
console.log($.trim(str) === "my home");//true
</script>
四、jQuery对象:
1.jQuery对象是一个包含所有匹配的任意多个dom元素的为数组对象
2.基本行为
size()/lenth:包含的DOM元素的个素数
[index]/get(index);得到对应位置的DOM元素
each():遍历包含所有的DOM元素。
index()得到所在兄弟元素中的下标。
练习:
<script>
/*
需求:
需求1:统计一共有多少个按钮
需求2:去除第二个button的文本
需求3:输出所有button标签的文本
需求3:输出“测试三”按钮是所有按钮中的第几个
*/
$(function () {
var $btns = $('button');
// console.log($btns);
//需求1.统计一共有多少个按钮
// console.log($btns.size(), $btns.length);
//需求2取出第2个button的文本
// console.log($btns[1].innerHTML, $btns.get(1).innerHTML);
//需求3:输出所有button标签的文本
//each():遍历包含所有DOM元素
$btns.each(function () {
console.log(this.innerHTML);
})
//参数1:索引值 参数2:元素对象
$btns.each(function (index, domEle) {
console.log(index + domEle.innerHTML)
});
//需求4:输出“测试三”按钮是所有按钮中的第几个
// index();得到在所在兄弟元素中的下标
console.log($('#btn3').index());
// var $btns = $('button');所获得的是伪数组(其实是object对象)
// 含有length属性,但是没有数组特别的方法:forEach()/push()/pop()/splice()
console.log($btns instanceof Array);//false
//自定义伪数组
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'adad';//设置第一个伪数组元素
weiArr.length = 1;//必须手动设置长度
console.log(weiArr, weiArr.length)
})
</script>