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 在弹出的日志框里,可以看到,你可以 ...
随机推荐
- PHP 之道
http://wulijun.github.io/php-the-right-way/
- 【转】OpenGL超级宝典笔记——纹理映射Mipmap
原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者,若非法转载请联系本人. 目录[-] Mipmapping Mipmap过滤 构建Mip层 ...
- 个人理解c#对称加密 非对称加密 散列算法的应用场景
c#类库默认实现了一系列加密算法在System.Security.Cryptography; 命名空间下 对称加密 通过同一密匙进行加密和解密.往往应用在内部数据传输情况下.比如公司a程序 和B程序 ...
- Javascript字节转换
//文件大小转换 function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024; sizes = ['B', 'K ...
- 5分钟部署ELK+filebeat5.1.1
标题有点噱头,不过网络环境好的情况下也差不多了^_^ 1. 首先保证安装了jdk. elasticsearch, logstash, kibana,filebeat都可以通过yum安装,这里前 ...
- js浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标 ...
- UP Board 超详细开箱评测
前言 原创文章,转载引用务必注明链接. 江浙沪就是好,昨天发货今天收到.另外爱板太省了,外包装小纸箱还是6s钢化膜的重复利用. 注意:拍照自带抖动功能,画质大家凑合着看.冬日天气干燥,手触摸板子前建议 ...
- git 命令操作
git add . : 将所有修改过的工作文件提交暂存区 git commit -am 'new' : 将修改过的文件进行记录 git push origin dev : 将项目推送到dev分只 ...
- Zabbix自定义监控8080端口的连接数
Zabbix自定义监控8080端口的连接数 一 zabbix自定义监控实现思路 实际上我们要想使用zabbix来监控一些服务的原理很简单,步骤分别是:1.写一个脚本用于获取待监控服务的一些状态信息2. ...
- sql 批量更新某个字段的值
UPDATE Tabel1 t1 set t1.col1= ( SELECT col2 from Tabel2 t2 WHERE t1.col1=t2.col2) where exists ( SEL ...