Jquary入门( 修改内容)
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){});
Jquary入门( 修改内容)的更多相关文章
- POI根据EXCEL模板,修改内容导出新EXCEL (只支持HSSF)
package excelPoiTest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutput ...
- Oracle 中利用闪回查询确定某表在某时间点之后的修改内容,并恢复至该时间点
Oracle 中利用闪回查询确定某表在某时间点之后的修改内容: 1.查看 DELETE 及 UPDATE 操作修改的数据: SQL> SELECT * FROM tab AS OF TIMEST ...
- Example011表单中修改内容
<!-- 实例011表单中修改内容的方法 --> <!DOCTYPE html> <html lang="en"> <head> & ...
- dedecms中{dede:myad name='about'/} 修改内容
网站首页index.htm中调用这个命令,显示一段文字,但是想要修改内容.所以想知道这个命令指定的文件内容在哪里寻找或者指定内容在哪里修改? 匿名 | 浏览 6036 次 发布于2014-02-19 ...
- git教程: 查看文件状态与修改内容
转载:时光机穿梭 我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed ...
- Git 查询某次历史提交的修改内容
在工作时,有时候想查看某次的提交修改了哪些的内容. 我们首先可以git log显示历史的提交列表: 之后我们用git show <commit-hashId> 便可以显示某次提交的修改内容 ...
- 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容
关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...
- Git以及github的使用方法(三),git status查看工作区的状态,git diff查看具体修改内容
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...
- SVN查看项目修改记录及修改内容
工具/原料 svn 一,查看修改记录 1 选择要查看的文件夹,打开之后在空白的地方右键. 2 选择svn里面的"查看日志".show_Log 3 在弹出的日志框里,可以看到,你可以 ...
随机推荐
- Connect to Office365
How to connect to office365 1. Connect to Exchange Online $UserCredential = Get-Credential $Session ...
- js定位
1.引入 百度地图js(1.3以后需要key) <script type="text/javascript" src="http://api.map.baidu.c ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- PHP 自动加载规范PSR-4
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- SQL Server存储过程创建和修改
create proc Get_Data( @Del_ID varchar(36))asselect * from Depts where DeptId=@Del_ID select * from D ...
- Redis连接
using System; using System.Configuration; using StackExchange.Redis; namespace Redis { public sealed ...
- c# .Net并行和多线程编程之Task学习记录!
任务Task和线程Thread的区别: 1.任务是架构在线程之上的,也就是说任务最终还是要抛给线程去执行. 2.任务跟线程不是一对一的关系,比如开10个任务并不是说会开10个线程,这一点任务有点类似线 ...
- 微信jsApI及微信分享对应在手机浏览器的调用总结。
摘录自别人的博客: 第一篇:微信内置浏览器的JsAPI(WeixinJSBridge续) 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript ...
- Parse Fatal Error at line 4 column 43: 已经为元素 "web-app" 指定属性 "xmlns"。
打开web.xml;最上面的web-app里面,看有没有重复的,重点关注xmlns="http://java.sun.com/xml/ns/javaee" ,如果重复,删去就好~~ ...
- VBA学习思路
打算花两三天学习VBA的基础,学习资料为<别怕,VBA其实很简单>,为了快速学习,先了解大致框架,后续再深入学习各种属性.方法和技巧. 1.VBA编程环境基本操作,手工操作,熟悉即可 2. ...