1. 使用JQ时需要先引用 JQ 包； 其他的JQ代码 需要写在 引用标签的下面如下图[基本格式]

ＪＱ中　是纯代码　　没有判断 没有循环   如果 有 时间间隔和延迟  则使用ＪＳ　代码

　　详见　下面例题

因为代码　放在最后　　所以　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.ＪＱ中得查找方法　　　找出来的　都是ＪＱＵＡＲＹ对象（数组形式存在）　　　０号索引位置　　为　　ｄｏｍ对象　

找元素,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入门（ 修改内容）的更多相关文章

  1. POI根据EXCEL模板，修改内容导出新EXCEL （只支持HSSF）

    package excelPoiTest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutput ...

  2. Oracle 中利用闪回查询确定某表在某时间点之后的修改内容，并恢复至该时间点

    Oracle 中利用闪回查询确定某表在某时间点之后的修改内容: 1.查看 DELETE 及 UPDATE 操作修改的数据: SQL> SELECT * FROM tab AS OF TIMEST ...

  3. Example011表单中修改内容

    <!-- 实例011表单中修改内容的方法 --> <!DOCTYPE html> <html lang="en"> <head> & ...

  4. dedecms中{dede:myad name='about'/} 修改内容

    网站首页index.htm中调用这个命令,显示一段文字,但是想要修改内容.所以想知道这个命令指定的文件内容在哪里寻找或者指定内容在哪里修改? 匿名 | 浏览 6036 次 发布于2014-02-19 ...

  5. git教程： 查看文件状态与修改内容

    转载:时光机穿梭 我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed ...

  6. Git 查询某次历史提交的修改内容

    在工作时,有时候想查看某次的提交修改了哪些的内容. 我们首先可以git log显示历史的提交列表: 之后我们用git show <commit-hashId> 便可以显示某次提交的修改内容 ...

  7. 纸壳CMS（ZKEACMS）体验升级，快速创建页面，直接在页面中修改内容

    关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...

  8. Git以及github的使用方法（三），git status查看工作区的状态，git diff查看具体修改内容

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  9. SVN查看项目修改记录及修改内容

    工具/原料 svn 一,查看修改记录 1 选择要查看的文件夹,打开之后在空白的地方右键. 2 选择svn里面的"查看日志".show_Log 3 在弹出的日志框里,可以看到,你可以 ...

随机推荐

  1. SpringMVC org.xml.sax.SAXParseException: cvc-complex-type.2.4.c 报错处理方式

    使用SpringMVC的过程中需要访问静态文件,即在spring-servlet.xml文件中添加了 <mvc:default-servlet-handler /> 标签,以开启Sprin ...

  2. 数据库中char与varchar类型的区别

    在建立数据库表结构的时候,为了给一个String类型的数据定义一个数据库的数据库类型,一般参考的都是char或者varchar,这两种选择有时候让人很纠结,今天想总结一下它们两者的区别,明确一下选择塔 ...

  3. 冰冻三尺非一日之寒--web来了

    第十四章    html  css 1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. H ...

  4. 精通Web Analytics 2.0 （9） 第七章：失败更快：爆发测试与实验的能量

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第七章:失败更快:爆发测试与实验的能量 欢迎来到实验和测试这个棒极了的世界! 如果Web拥有一个超越所有其他渠道的巨大优势,它就 ...

  5. Boost.Python简介

    Boost.Python简单概括:是Boost库的一部分:用来在C++代码中调用python代码以及在Python代码中调用C++代码,并且避免用户直接操作指针. 以下内容搬运自:https://wi ...

  6. RocketMQ原理解析-Remoting

    Remoting2. 通信层底层传输协议 RocketMq服务器与客户端通过传递RemotingCommand来交互,通过NettyDecoder,对RemotingCommand进行协议的编码与解码 ...

  7. android studio关联genymotion模拟器，未显示设备

    如以下截图所示,在搭建android studio+genymotion时,遇到android studio关联genymotion时,显示不出模拟器设备,请问有没有遇到此现象的朋友,分享下解决方法, ...

  8. 传统瀑布式&敏捷开发

    ---传统瀑布式 瀑布模型式是最典型的预见性的方法,严格遵循预先计划的需求.分析.设计.编码.测试的步骤顺序进行. 步骤成果作为衡量进度的方法,例如需求规格,设计文档,测试计划和代码审阅等等. 瀑布式 ...

  9. Sed、Awk单行脚本快速参考

    文本间隔: # 在每一行后面增加一空行 sed G awk '{printf("%s\n\n",$0)}' # 将原来的所有空行删除并在每一行后面增加一空行. # 这样在输出的文本 ...

  10. 《你不常用的c#之XX》

    你不常用的c#之一>:略谈unsafe http://blog.csdn.net/robingaoxb/article/details/6199508 <你不常用的c#之二>:略谈G ...