Jquary入门（ 修改内容）
Posted 张凯::get("新技能")
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquary入门（ 修改内容）相关的知识，希望对你有一定的参考价值。
1. 使用JQ时需要先引用 JQ 包； 其他的JQ代码 需要写在 引用标签的下面如下图[基本格式]
ＪＱ中 是纯代码 没有判断 没有循环 如果 有 时间间隔和延迟 则使用ＪＳ 代码
详见 下面例题
因为代码 放在最后 所以 JQ 可以加$(document).ready 也可以不加
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 .aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6} 9 </style> 10 </head> 11 12 <body> 13 14 <div class="aa"> 15 </div> 16 <div class="aa"> 17 </div> 18 <div class="aa"> 19 </div> 20 <div class="aa"> 21 </div> 22 <div class="aa"> 23 </div> 24 <div class="aa"> 25 </div> 26 <div class="aa"> 27 </div> 28 <div class="aa"> 29 </div> 30 <div class="aa"> 31 </div> 32 <div class="aa"> 33 </div> 34 <div class="aa"> 35 </div> 36 <div class="aa"> 37 </div> 38 <div class="aa"> 39 </div> 40 <div class="aa"> 41 </div> 42 <div class="aa"> 43 </div> 44 45 <input type="button" value="测试" onclick="test()" /> 46 47 </body> 48 49 <script type="text/javascript"> 50 $(document).ready(function(){ 51 $(".aa").click(function(){ 52 //所有元素背景色变成原来的 53 $(".aa").removeAttr("xz"); 54 $(".aa").css("background-color","#3F6"); 55 //找到点击了谁 56 $(this).attr("xz","1"); 57 $(this).css("background-color","red"); 58 }) 59 60 $(".aa").mousemove(function(){ 61 //所有元素背景色变成原来的 62 $(".aa").css("background-color","#3F6"); 63 //找到点击了谁 64 $(this).css("background-color","yellow"); 65 $("[xz=\'1\']").css("background-color","red"); 66 }) 67 68 }) 69 </script> 70 71 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 .aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6} 9 </style> 10 </head> 11 12 <body> 13 14 <div class="aa"> 15 </div> 16 <div class="aa"> 17 </div> 18 <div class="aa"> 19 </div> 20 <div class="aa"> 21 </div> 22 <div class="aa"> 23 </div> 24 <div class="aa"> 25 </div> 26 <div class="aa"> 27 </div> 28 <div class="aa"> 29 </div> 30 <div class="aa"> 31 </div> 32 <div class="aa"> 33 </div> 34 <div class="aa"> 35 </div> 36 <div class="aa"> 37 </div> 38 <div class="aa"> 39 </div> 40 <div class="aa"> 41 </div> 42 <div class="aa"> 43 </div> 44 45 <input type="button" value="测试" onclick="test()" /> 46 47 </body> 48 49 <script type="text/javascript"> 50 51 $(".aa").click(function(){ 52 //所有元素背景色变成原来的 53 $(".aa").removeAttr("xz"); 54 $(".aa").css("background-color","#3F6"); 55 //找到点击了谁 56 $(this).attr("xz","1"); 57 $(this).css("background-color","red"); 58 }) 59 60 $(".aa").mousemove(function(){ 61 //所有元素背景色变成原来的 62 $(".aa").css("background-color","#3F6"); 63 //找到点击了谁 64 $(this).css("background-color","yellow"); 65 $("[xz=\'1\']").css("background-color","red"); 66 }) 67 68 69 </script> 70 71 </html>
2.ＪＱ中得查找方法 找出来的 都是ＪＱＵＡＲＹ对象（数组形式存在） ０号索引位置 为 ｄｏｍ对象
找元素,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]);
３.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.ＪＱ的 方法可以获取内嵌中的样式（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){});
以上是关于Jquary入门（ 修改内容）的主要内容，如果未能解决你的问题，请参考以下文章