jQuery 是一个 JavaScript 库。
CDN：
Firefox 控制台
要操作的 Dome
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
.highlight{
color: red;
background-color: yellow;
font-style: italic;
}
</head>
<body>
<p>Hello <span>Jquery</span></p>
<a href="http://jquery.com/">jQuery</a>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
Firefox Console
调用 jQuery
jQuery Object
jQuery 的方法和属性在 window.jQuery 或 window.$ （别名）下
<script>
$("h1").addClass("highlight");
</script>
<script>
jQuery("h1").addClass("highlight");
</script>
Document Ready
$(document).ready() 会等到 DOM 加载完毕再执行 JavaScript 代码
<script>
// 弹出消息，并跳转页面
$(document).ready(function(){
$("a").click(function(event){
alert("You clicked the link.");
});
});
</script>
而 window.onload 会等在页面完全加载完毕（包括图片、广告、iframe）再执行 JavaScript 代码
window.onload = function() {
alert( "welcome" );
};
$( window ).on( "load", function() { ... })
javaScript 代码都应包含在
$(document).ready()内，避免 javaScript 代码执行时，被操作的元素还未加载完毕
event.preventDefault()
event.preventDefault() 用来阻止事件的默认动作；
-
<a>标签的跳转动作 -
<form>的提交动作（用JavaScript 来获取<input>数据并在本地处理）
<script>
// 弹出消息，但不会跳转到其他页面
$(document).ready(function(){
$("a").click(function(event){
alert("You clicked the link.");
event.preventDefault();
});
});
</script>
操纵样式 CSS
$("span").addClass("highlight");
$("span").removeClass("highlight");
$("span").toggleClass("highlight");
$("span").hasClass("highlight");
特效
$("a").click(function(event){
$(this).hide("slow")
event.preventDefault();
});
callbacks & functions
callback 是将一个函数（func_a）的定义传给另一个函数（func_b），当 func_b 执行完毕时，执行 func_a（callback）
# 这不是 callback (而是函数)，因为这样会先执行 myCallBack()，并将其返回值传给 get()
$.get( "myhtmlpage.html", myCallBack());
callback
# callback: 用 get 获取 html 文件，在执行 myCallBack
$.get( "myhtmlpage.html", myCallBack );
# 带参数的 callback
$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});
网友评论