引入jquery
本地引用
<script src="jquery-3.2.1.js"></script>
网络引用
谷歌CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
微软CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
使用格式
$(selector).action()
$固定表示为 jQuery
selector要查找名字
action() 执行的动作
文档就绪函数
$(document).ready(function(){
});
为了防止在页面为加载完就执行
选择器
1. 元素选择器
用定义的id名查找，前面加#
$("#id").method()
用元素查找
$("p").method()
用元素的id 和 class
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
类名查找 “ .类名”
$(".class").method()
2.属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
例如
$("[name='name']").method()
3.CSS 选择器
用于改变 HTML 元素的 CSS 属性
$("p").css("background-color","red");
等...
jQuery 事件函数
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
jQuery 代码放到一般放在部分 <head></head>之间
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
jQuery 名称冲突
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号