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. python基础补漏-01

    python对象的方法 1.python的特性:一切皆对象 2 type(obj) 查看对象的类型 3 dir(obj)查看类中所有详细的功能 4 help(obj) 查看类中所有详细的功能 类中的方 ...

  2. neo4j-java连接

    本例使用neo4j3.0.1架包 使用maven下载架包 <!-- https://mvnrepository.com/artifact/org.neo4j/neo4j-jdbc-driver ...

  3. Spring test

    @Rollback 用于标记在spring test中是否提交事务, 默认为true, 即不提交, 如果需要设置单元测试完成时自动提交事务, 需要设置rollback为false; 可以使用 @Com ...

  4. 查看 SHA1

    keytool -v -list -keystore C:\Users\tianyingzhong\.android\debug.keystore 输入密钥库口令: android android

  5. AJAX应用小案例

    此案例在XAMPP本地服务器上运行,需要应用jquery3.1.1的版本,应用JSON传递数据 代码如下: html代码: <!DOCTYPE html><html lang=&qu ...

  6. SharePoint Online 申请试用链接地址

    SharePoint Online 申请试用链接地址: https://products.office.com/en-us/business/compare-office-365-for-busine ...

  7. Swift -Login(MVC 纯代码)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } span.s1 { } span.s2 { c ...

  8. linux 主机名

    查看主机名命令:# uname -n csdba #hostname csdba 1.通过hostname命令.命令格式:hostname newhostname 此命令的作用是暂时的修改linux的 ...

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

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

  10. 利用vim查看日志,快速定位问题

    起因 在一般的情况下,如果开发过程中测试报告了一个问题,我一般会这么做: 1.在自己的开发环境下重试一下测试的操作,看看能不能重现问题.不行转2 2.数据库连接池改成测试库的地址,在自己的开发环境下重 ...