jquery学习
目录
01 day
初识jQuery
是什么? 为什么用? 怎么用?
what:
-
一个优秀的js函数库:封装了 Bom和Dom
why:
-
html元素选取(选择器)
-
html元素处理
-
css操作
-
html事件处理
-
js动画效果
-
链式调用
-
读写合一
-
浏览器兼容
-
易扩展插件
-
ajax封装
-
......
how:
-
引入jQuery库 :1、服务器本地库 2、CDN远程库
-
使用jQuery:1、jQuery核心函数($/jQuery) 2、jQuery核心对象(执行$()返回的对象)
CDN :项目上线时,一般使用比较靠谱的CDN资源库 减轻服务器负担(www.bootcdn.cn)
-
区别2种js库库文件:发布时 1.开发版(测试版 .js)
自己写的时候用 2.生产版(压缩版.min.js)
压缩版是去掉了换行和注释
将变量由单词办成字母 很难 看懂
-
区别2种引用JS库的方式
-
区别jQuery的不同版本:
1.x 兼容老版本IE 文件更大
2.x 部分IE8及以下不支持 文件小,执行效率高
3.x 完全不支持IE8及以下版本 提供了一些新的api 提供不包含ajax/动画api的版本
-
例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 点击确定输入输入的字 -->
用户名:<input type="text" name="" width="30px" id="username">
<input type="button" id="bt1" value="确定(原生版)">
<input type="button" id="bt2" value="确定(jQuery)">
<!-- // 使用原生 dom -->
<script>
window.onload = function() {
var bt1 = document.getElementById('bt1');
bt1.onclick = function() {
var username = document.getElementById('username').value;
alert(username);
}
}
</script>
<!-- // 使用jQuery -->
<!-- 本地引入jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 远程引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
$(function() { //添加文档加载完成的监听
$('#bt2').click(function() { //给bt2添加点击事件
var username = $('#username').val()
alert(username)
})
})
</script>
</body>
</html>
jQuery的两把利器
1、jQuery核心函数(jQuery/$)
简称:jQuery函数
jQuery库向外展示的就是(jQuery/$)
引入jQuery库后,直接使用$即可
当函数用:$(xxx)
当对象用:$.xxx()
2、jQuery核心对象($()返回的对象)
简称:jQuery对象
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
使用jQuery对象:$obj.xxx()
jQuery的核心函数
1、作为一般函数调用
1.1、参数为函数:当DOM加载完成后,执行此回调函数
1.2、参数为选择器字符串:查找所有匹配的标签,并将其封装为jQuery对象
1.3、参数为DOM对象,将DOM对象封装为jQuery对象
1.4、参数为html标签字符串:创造标签对象并封装成jQuery
2、作为对象使用:$.xxx()
2.1、$.each():隐式遍历数组
2.2、$.trim():去掉两端的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<!--
1:点击按钮,显示按钮文字,显示一个新的输入框
2:遍历输出数组中所有的元素值
3.去掉" my shchool "两端的空格
-->
<body>
<div>
<button id="bt1">测试</button><br>
<input type="text" name="msg1" id="msg1"><br>
<input type="text" name="msg2" id="msg2"><br>
</div>
</body>
<script>
$(function() {
$('#bt1').click(function() {
// this指定是发生事件的对象 这里指的是button
// alert($(this).html())等价于alert(this.innerHTML)
alert($(this).html())
// 1.4、参数为html标签字符串:创造标签对象并封装成jQuery
$('<input type="text" name="msg2" id=""><br>').appendTo("div")
// $.trim()去掉两端的空格
var str = ' my shchool ';
$('#msg1').val(str)
$('#msg2').val(str.trim())
})
})
// $.each():隐式遍历数组 arr是数组 function回调函数
// index指的下标 item指的是值
var arr = [1, 2, 3]
$.each(arr, function(index, item) {
alert(item)
})
</script>
</html>