jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作,jquery事件的绑定方式。
基础语法是:$(selector).action()
- 美元符号定义 jQuery,调用对象
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
下载jquery.js:jquery安装
注:不建议使用CDN引用它,当不能联网时项目不能用。
语法实例:参照jquery语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入jquery包必须在自定义包含jquery代码的前面
不导入会报$ is not defined,jquery代码不能用
-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
// Javascript定义函数预加载时的方法
/*
window.οnlοad=function(){
var obj=document.getElementById("obj");
obj.οnclick=function(){
obj.style.display="none";
}
}
*/
// JQuery定义函数预加载时的方法
// $符号是jQuery缩写形式,$和jQuery是JQuery运行时的构造方法,可以用jQuery代替$
$(document).ready(function(){ //内置对象不用引号,不是内置对象需要引号
// 点击隐藏,所有事件封装成方法
$("#obj").click(function(){ //获取 id="obj" 的元素。
$(this).hide(); //隐藏当前的 HTML 元素。
});
});
</script>
<script>
$(document).ready(function(){
$(".btn").click(function(){ //所有 class="btn" 的元素获得事件
$("p").hide(); //隐藏所有 <p> 元素,一个单词代表html标签
});
});
</script>
<style type="text/css">
.btn{
width: 70px;
height: 40px;
background: orange;
}
</style>
</head>
<body>
<p id="obj">If you click on me, I will disappear.</p>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" class="btn">Click me1</button>
<button type="button" class="btn">Click me2</button>
</body>
</html>
jQuery选择器
准确选取应用效果的元素
学习 jQuery选择器 和 jQuery选择器参考手册
注:
1.尽量简短准确选择到指定元素,不要嵌套过多过于复杂,不利于代码的可读性。
2.[href!='#'] 会选取到不带有href属性的元素和href属性不等于#的元素,单独选取会选取到整个页面。
3.$("th,td,.intro") 是指包含其中任何一个匹配的条件的所有元素。