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. 2017年"程序媛和工程狮"绝对不能忽视的编程语言、框架和工具

      2017年"程序媛和工程狮"绝对不能忽视的编程语言.框架和工具 在过去的一年里,软件开发行业继续大踏步地向前迈进.回顾 2016 年,我们看到了更多新兴的流行语言.框架和工具, ...

  2. Linux 建立文件夹的链接

    linux下的软链接类似于windows下的快捷方式 建立软链接 ln -s a b a 就是源文件,b是链接文件名,其作用是当进入b目录,实际上是链接进入了a目录 example:ln -s /ho ...

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  4. Android SD卡存储

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_SDcard_store.html 一 概念 SD卡存储空间比较大,当需要存取较大的 ...

  5. 20145204&20145212信息安全系统实验二

    20145204&20145212信息安全系统实验二 链接

  6. Spring MVC学习笔记——文件上传

    1.实现文件上传首先需要导入Apache的包,commons-fileupload-1.2.2.jar和commons-io-2.1.jar 实现上传就在add.jsp文件中修改表单 enctype= ...

  7. Fedora20-64bit cross-compiling arm-linux-gcc

    0按照友善之臂的手册建立交叉编译环境时,添加用户变量,最好是去更改 profile 文件 因为 profile 是所有用户都可以使用的,类似于 windows 中的系统变量 而 .bashrc 只有该 ...

  8. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  9. 常用linux 命令 -网络相关

    此文参考: 1.网络文章,但最后发现源头是在<鸟哥私房菜>,再次感谢原作者: 2.工作中跟同事讨论,自己尝试. 本人水平有限,如有错误,请大家指正,谢谢. 一 网络参数设置命令 1.ifc ...

  10. python smtp 群发邮件

    最近工作中遇到使用脚本处理问题并发送结果邮件,使用python的smtp模块很简单的完成了实现.今天遇到一个问题,根据脚本的测试结果需要群发邮件,但是发送邮件的py文件只有首个地址收到了邮件.仔细排查 ...