12、jQuery知识总结-2
1、避免冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式
<html>
<head>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="demo.js"> ;</script>
</head> <body>
<h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
/**
* Created by kunyashaw on 2016/3/23.
*/
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
2、jquery常用
<html>
<head> <meta charset="utf-8">
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="demo.js"> ;</script> </head> <body>>
<div id="divAll">
<p id="p2">这是段落中的<b>粗体</b>文本。</p>
<br/>
<p id='p1'>This is a paragraph.</p>
<br/>
<a href="http://www.baidu.com" id="a1"> baidu </a>
<br/>
姓名:<input id='input'> </input> <div style="
position: relative;
width: 100px;
height: 200px;
background-color: blueviolet;"> This is another paragraph.</div> <button type="button" id='button1'>Click me</button>
<button type="button" id="button2">Click me2</button> <button type="button" id="button3">显示text</button>
</div> <button type="button" id="button4">显示html</button> </body>
</html>
/**
* Created by 众磊 on 2016/3/23.
*/
;
$(document).ready(function(){
$("#button1").click(function(){ var div= $('div');
var height = $('div').length;
$('div').hide(500, function () {
if(height-- > 1)
{return}
else
{
alert("over");}
}); $("#p1").css("color","red").slideUp(2000).slideDown(2000);
}); $("#button2").click(function () {
var a = $('a1');
alert($("#a1").attr('href')); var input = $('input');
alert(input.val());
input.val("oh no!张众磊");
}); var p = $('#p2');
$("#button3").click(function () {
alert(p.text());
p.html('<b>haha</b>');
}); $("#button4").click(function () {
//alert(p.html());
p.text("fucking");
$("#divAll").empty(); }); });
12、jQuery知识总结-2的更多相关文章
- jQuery知识重构
jQuery知识重构 目录: 一.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- jQuery 知识体系
jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...
- jQuery知识集锦
CreateTime--2017年2月16日14:00:22Author:MarydonjQuery知识集锦1.empty()与remove()的区别 <select id="ty ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- jQuery知识梳理20190818
目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...
- 12 jQuery的ajax
什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页 ...
随机推荐
- C#值类型、引用类型的区别
在<C#类型简述>http://blog.csdn.net/letnet1981/article/details/48223831,中提到了值类型和引用类型,这里我们就来了解一下它们的区别 ...
- ADO.net数据访问方法
ADO.NET是一组用于和数据源进行交互的面向对象的类库. 核心组件有两个: DataSet 是 ADO.NET 的非连接(断开)结构的核心组件.DataSet 的设计目的很明确:为了实现独立于任何数 ...
- 查询MySQL的存储引擎
- 详细讲解:通过phpstudy 设置站点域名、站点域名管理
我们在本地编程的时候,会遇到路径特别长的情况,这样子我们在url中的输入就会变得不方便而且容易报错,那么在phpstudy这个环境中,有一个很好的功能,就是“站点域名管理”,他能让我们的url网址大大 ...
- php使用GD库实现图片水印和缩略图——给图片添加文字水印
今天呢,就来学习一下在php中使用PD库来实现对图片水印的文字水印方法,不需要PS哦! 首先,准备素材 (1)准备一张图片 (2)准备一张水印(最好是透明的,即背景是白色底) (3)准备一中字体(在电 ...
- 详解Unity 4.6新UI的布局
本文所讲的是Unity 4.6中新加入的uGUI,官方称Unity UI,而不是过去的OnGUI式的旧UI(官方称Legacy GUI). 我曾经在8月份对照4.6 Beta的文档写过一篇笔记学习Un ...
- python时间转换 ticks-FYI
#设a为字符串 import time a = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组 time.strptime(a,'%Y-% ...
- 【洛谷1967】货车运输(最大生成树+倍增LCA)
点此看题面 大致题意: 有\(n\)个城市和\(m\)条道路,每条道路有一个限重.多组询问,每次询问从\(x\)到\(y\)的最大载重为多少. 一个贪心的想法 首先,让我们来贪心一波. 由于要求最大载 ...
- CopyOnWriteArrayList分析——能解决什么问题
CopyOnWriteArrayList主要可以解决的问题是并发遍历读取无锁(通过Iterator) 对比CopyOnWriteArrayList和ArrayList 假如我们频繁的读取一个可能会变化 ...
- R+hadoop
这里面的配置 http://www.rdatamining.com/big-data/r-hadoop-setup-guide root@kali:~/hadoop_home/hadoop-1.2.1 ...