1. 使用JQ时需要先引用 JQ 包; 其他的JQ代码 需要写在 引用标签的下面如下图[基本格式]
JQ中 是纯代码 没有判断 没有循环 如果 有 时间间隔和延迟 则使用JS 代码
详见 下面例题
因为代码 放在最后 所以 JQ 可以加$(document).ready 也可以不加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6}
</style>
</head> <body> <div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div> <input type="button" value="测试" onclick="test()" /> </body> <script type="text/javascript">
$(document).ready(function(){
$(".aa").click(function(){
//所有元素背景色变成原来的
$(".aa").removeAttr("xz");
$(".aa").css("background-color","#3F6");
//找到点击了谁
$(this).attr("xz","1");
$(this).css("background-color","red");
}) $(".aa").mousemove(function(){
//所有元素背景色变成原来的
$(".aa").css("background-color","#3F6");
//找到点击了谁
$(this).css("background-color","yellow");
$("[xz='1']").css("background-color","red");
}) })
</script> </html>
有$(document)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6}
</style>
</head> <body> <div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div> <input type="button" value="测试" onclick="test()" /> </body> <script type="text/javascript"> $(".aa").click(function(){
//所有元素背景色变成原来的
$(".aa").removeAttr("xz");
$(".aa").css("background-color","#3F6");
//找到点击了谁
$(this).attr("xz","1");
$(this).css("background-color","red");
}) $(".aa").mousemove(function(){
//所有元素背景色变成原来的
$(".aa").css("background-color","#3F6");
//找到点击了谁
$(this).css("background-color","yellow");
$("[xz='1']").css("background-color","red");
}) </script> </html>
无$(document)
2.JQ中得查找方法 找出来的 都是JQUARY对象(数组形式存在) 0号索引位置 为 dom对象
找元素,Jquery对象
var b = $("#aa"); //根据ID找
alert(b[0]); var b = $(".aa"); //根据class找
alert(b[1]); //找到的是DOM对象
alert(b.eq(1)); //找到的是Jquery对象 var b = $("div"); //根据标签名找
alert(b[0]); var b = $("[id='aa']"); //根据属性找
alert(b[0]);
3.JQ 操作内容
非表单元素
b.html(); //操作元素里面的HTML代码
b.html("<span style='color:red'>文字</span>");
b.text(); //操作元素里面的文本
b.text("文字"); 表单元素 (添加value值)
b.val("hello");
4. 操作属性
设置属性
b.attr("bs","test");
获取属性
alert(b.attr("aa"));
移除属性
b.removeAttr("aa");
checkbox 属性 使用下面的修改方式 避免重复(因为原文中有默认属性)
b.prop("checked",false);
5.JQ的 方法可以获取内嵌中的样式(JS操作 只可以获取 内联中的样式)
设置内嵌中样式: b.css("background-color","red");
获取内嵌中得样式:alert(b.css("width"));
alert(b.css("background-color"));
6.bind 绑定函数
$("body").unbind("mousemove");
$("body").bind("mousemove",function(e){});