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 在弹出的日志框里,可以看到,你可以 ...
随机推荐
- 获取文件mime类型
检测文件类型 finfo_file (PHP >= 5.3.0, PECL fileinfo >= 0.1.0) 修改php.ini,将extension=php_fileinfo.dll ...
- Android基础总结(五)
HttpClient 发送get请求 创建一个客户端对象 HttpClient client = new DefaultHttpClient(); 创建一个get请求对象 HttpGet hg = n ...
- NPOI导出数据,设置格式,锁定单元格
代码包括: 1:导出多个sheet 2:设置单元格格式 3:合并单元格 4:下拉框选项 5:输入数字限制 6:锁定单元格 static void Main(string[] ar ...
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- Xcode 运行程序,左侧memory 不显示内存
运行程序后,xcode 不显示当前使用的内存情况,问题是打开了僵尸--enable zoombie Objects,关闭即可 打开 product--->SCheme-->EditSChe ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- Web Service简要概念,学习记录!
Web Service平台需要一套协议来实现分布式应用程序的创建.任何平台都有它的数据表示方法和类型系统.要实现互操作性,Web Service平台必须提供一套标准的类型系统,用于沟通不同平台.编程语 ...
- 三种执行SQL语句的的JAVA代码
问题描述: 连接数据库,执行SQL语句是必不可少的,下面给出了三种执行不通SQL语句的方法. 1.简单的Statement执行SQL语句.有SQL注入,一般不使用. public static voi ...
- IIS7错误“Web服务器被配置为不列出此目录的内容”的解决办法
*打开 Internet 信息服务(IIS)管理器 - 目录浏览 选择启用即可.
- leetcode--Maximum Subarray
题目链接:https://leetcode.com/problems/maximum-subarray/ 算法类型:动态规划 题目分析:最大序列和 代码实现: class Solution(objec ...