jquery复习日记(1)
jquery封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
核心关键字: 链式、多功能、高效灵活
1.安装jquery
1)npm下:
npm install jquery
2)文件引入:
<script src="./jquery/jquery.min.js"></script>
3)cdn在线引入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
ps:日常demo使用jquery.js,这样格式更清晰,而项目上线时则推荐使用迷你版,它精简了大量空格,
提高了效率
2.在script中的使用
在script中,将“ $ ”(数字4键上的美元符号)比作jquery,换句话说,$在JavaScript中指的就是jQuery,jQuery对象与JavaScript对象是不同的!
1)jq的入口函数
所有的jQuery语句都被包裹在一个$入口函数中
$(function() {
// jq函数写在这里
});
你也可以像下面这样写,不过通常按照上面写比较简洁:
$(document).ready(function(){ // jq函数写在这里 });
引入js的window.onload:
window.onload函数是指当html和css加载完毕后执行的js文件,这样是为了防止出现页面还未加载完毕,js就出现在了页面中的这种意外事故。通常写在head标签内,(当然要写在script内)
$(document).ready()函数正是对标js的window.onload,然而,它 与window.onload也有几点不同:
a:$(document).ready()函数可以没有加载限制,这意味着,你可以将它写在任意一个你喜欢的地方(前提是外面要有script包裹)
b:js的window.onload只能写一次,而$(document).ready()可以写多次。
3.jQuery的各种选择器
jq的强项就是精于各种dom操作,这一点在选择器上就可以看出来
通用语法:
$(function() {
$(" 选择器 ").method() //找到某个dom元素并对它进行操作
})
标签选择器:
$(function() {
$(" button ").method() //找到button伪数组并对它们进行操作
})
请注意!除非保证只有一个,标签选择器通常找到的是一类伪数组,要想对某个标签操作建议后加eq()
$(function() {
$(" button:eq(0) ").method() //此时选中了第0个button标签
})
类选择器:
$(function() {
$(".btn").method() //选择了类名为btn的元素并对其操作
})
id选择器
$(function() {
$("#btn").method() //选择了id为btn的选择器并对其操作
})
如果你是初学者,了解了上面的选择器就会发现--其实与css的选择器是一样的
4.各类方法
a. on() 向被选元素添加事件处理程序
$(function() {
$("#btn").on("click",function(){
//找到#btn元素并为它添加点击事件
})
})
第一个参数是事件名,第二个是一个回调函数
最新文章
- html5 拖拽函数1--不兼容火狐
- ASP.NET 成功执行Update 的 ExecuteNonQuery() 返回值大于0,但是查看数据库却没有改变
- Vim的使用方法
- Linux 常用系统命令-20160504
- 实现android apk反编译后代码混淆
- Mono For Android中简单实现按钮的动画效果
- 获取和设置iframe中的元素
- Android开发okhttp,retrofit,android-async-http,volley?
- 【Qt for Android】OpenGL ES 绘制彩色立方体
- Linux如何正确关机
- webpack2学习日志
- 洛谷P3164 [CQOI2014]和谐矩阵
- 创建ndarray
- MOS管应用概述(四):基本参数
- LabVIEW中下拉列表和枚举的区别(两点)
- MATLAB 程序处理结果出现 NAN 问题
- (转) Face-Resources
- git 先建立本地分支,再传给线上库
- HTC Desire 816刷机教程(图文)
- 【Loadrunner】如何通过loadrunner利用代理对手机端Web浏览器及APP进行录制?