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通过后台加载数据,并在网页 ...
随机推荐
- 05、Win7上openSSH的安装与配置
05.Win7上openSSH的安装与配置 1.概述 linux上的ssh命令在网络通信场景下非常方便.现在windows也支持ssh方式和远程主机进行访问.如果只是使用ssh简单的访问功能,就需要很 ...
- Linux最常用命令实战
1.改变机器的名称: vim /etc/hostname Master 在文件中修改机器名称为我们想要的名称(相当于域名) 可以通过shutdown -h now 关闭 2.查看当前机器IP: ifc ...
- LeetCode Remove Duplicates from Sorted List 删除有序链表中的重复结点
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- 一次对真实网站的SQL注入———SQLmap使用
网上有许多手工注入SQL的例子和语句,非常值得我们学习,手工注入能让我们更加理解网站和数据库的关系,也能明白为什么利用注入语句能发现网站漏洞. 因为我是新手,注入语句还不太熟悉,我这次是手注发现的注点 ...
- 定义多个属性 Object.defineProperties()
var book = {} Object.defineProperties(book,{ _year:{ value:2004 }, editable:{ value:1 }, year:{ get: ...
- eclipse Indigo搭建SSH框架详解
SSH框架是最常用的框架之一,在搭建SSH框架的时候总有人遇到这样,那样的问题.下面我介绍一下SSH框架搭建的全过程. 第一步:准备工作. 下载好eclipse,Struts2,Spring,Hi ...
- 在PHP中读取二进制文件
很多时候,数据并不是用文本的方式保存的,这就需要将二进制数据读取出来,还原成我们需要的格式.PHP在二进制处理方面也提供了强大的支持. 任务 下面以读取并分析一个PNG图像的文件头为例,讲解如何使用P ...
- 关于请求时状态为cancel
项目中发现有一个问题,在我发送某些请求的时候请求一会状态就变为cancel了,我滴个乖乖,这是咋回事,被取消了,后来经过仔细排查后发现了以下两个问题 1.AJAX和form表单同时使用,(form提交 ...
- dojo/Deferred类和dojo/promise类的使用
参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181 https://dojotoolkit.org/docume ...
- basic_double_stream_incorrect
不合理的代码 /* * Copyright 1993-2010 NVIDIA Corporation. All rights reserved. * * NVIDIA Corporation and ...