jq-杂记
点击消失
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
隐藏属性
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
选择器，选中元素
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
鼠标移动显示
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
jq隐藏显示元素
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
隐藏时间
$("p").hide(1000);
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$("p").toggle();
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn() 变化出现
fadeOut() 变化消失
fadeToggle()
fadeTo() 变化到
单机下滑出现 slideToggle{上下切换}
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script> <style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
animate方法移动
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
animate实现下拉式出现与消失
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
简单的动画变换
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
暂停与开始滑动
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
单机改变文本
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
单击添加到前面
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body> <p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button> </body>
点击增加文本的方式
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
插入位置
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
remove移出元素
$("#div1").remove();
empty清空子元素
$("#div1").empty();
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jq-杂记的更多相关文章
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
- [Erlang 0118] Erlang 杂记 V
我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下. 做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
- jq 根据值的正负变色
效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...
- jq 个性的隔行变色
效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
随机推荐
- Mibew Messenger (also known as Open Web Messenger)
Mibew Messenger (also known as Open Web Messenger) is an open-source live support application writte ...
- springboot下多线程开发注意事项
基于springboot的多线程程序开发过程中,由于本身也需要注入spring容器进行管理,才能发挥springboot的优势.所以这篇文字主要用来记录开发中两者结合时需要注意的一些事项. 第一步我们 ...
- 数据仓库专题20-案例篇：电商领域数据主题域模型设计v0.2(改进意见征集中）
一.电商分类(平台+自营+复合) (1)平台型电商:淘宝+天猫+百度Mall等: (2)自营型电商: 2.1 综合型:京东(早期)+当当(早期): 2.2 垂直型:好像这种类型越来越少了: (3)复合 ...
- SQLServer数据库自增长标识列的更新修改操作
SQLServer数据库自增长标识列的更新修改操作方法在日常的sql server开发中,经常会用到Identity类型的标识列作为一个表结构的自增长编号.比如文章编号.记录序号等等.自增长的标识列的 ...
- SpringBoot使用redis缓存List
一.概述 最近在做性能优化,之前有一个业务是这样实现的: 1.温度报警后第三方通讯管理机直接把报警信息保存到数据库: 2.我们在数据库中添加触发器,(BEFORE INSERT)根据这条报警信息处理业 ...
- spring cloud-前端跨域问题的解决方案
当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题. 解决方案一: ...
- LeetCode——5.Longest Palindromic Substring
一.题目链接:https://leetcode.com/problems/longest-palindromic-substring/ 二.题目大意: 给定一个字符串,找出它最长的回文子串.例如,字符 ...
- ES6基础三（对象）
对象赋值 在es6中,可以直接将声明的变量赋值给对象: Object.keys().Object.values()和Object.entries() 在ES6中,允许我们使用变量作为对象的ke ...
- 关于requests的session方法保持不了cookie的问题。(seesion的意思是保持一个会话，比如 登陆后继续操作(记录身份信息) 而requests是单次请求的请求，身份信息不会被记录)
最近在做爬虫的时候遇到了一个问题,在用requests的session方法保持cookie的时候发现requests不能保持手动构建的cookie.起初以为requests只能自动保持由服务器返回的s ...
- 05-RARP: 逆地址解析协议
具有本地磁盘的系统引导时,一般是从磁盘上的配置文件中读取I P地址.但是无盘机,如X终端或无盘工作站,则需要采用其他方法来获得I P地址. 网络上的每个系统都具有唯一的硬件地址,它是由网络接口生产厂家 ...