jquery第二篇
1 操作元素(属性,css,文档处理)
--------------------------属性
$("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp();
attr和prop的区别:
attr对自定义属性使用
prop对固有属性使用
--------------------------CSS类
$("").addClass(class|fn) $("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr])
val更改固有属性的值
------------------------文档处理
(1)创建一个标签对象
$(“<p>”)
(2)内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo");
<div>
<p>PPP</p>
</div>
<button> add</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$("button").click(function () {
$("div").append("<h1>hello</h1>")##插入在标签的后面
$("div").prepend ("<h1>hello</h1>")##插入在标签的上面
var $ele=$("<p>hello</p>")//创建一个新的标签
$ele.appendTo("div")##在div中插入新标签,新标签在原始标签后面
});
</script>
(3) 外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo");
(4) 替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
(5) 删除
$("").empty()##清除自己的子集 $("").remove([expr])##完全清除
(6) 复制
$("").clone([Even[,deepEven]])
2 JQ的循环实现
方式一:
格式 $.each(arr,funtion(){})
arr=[15,99,"hello"]; $.each(arr,function (i,j) { //console.log(i);下标 // console.log(j);值 });
方式二:
格式 $("tr").each(function(){
console.log($(this).html())
})
$("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); if ($(this).prop("checked")){ $(this).prop("checked",false) }else {$(this).prop("checked",true) }
3 实现效果
1.动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>hello world</p>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">toggle</button>
<img src="doe.jpeg">
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//标签对象.事件(function(){})
// $("#show").click(function () {
// alert(123)
// })
// $("#hide").click(function () {
// $("p").hide(1000)
// });
// $("#show").click(function () {
// $("p").show(1000)
// })
$("#show").click(function () {
$("img").show(1000)
});
$("#hide").click(function () {
$("img").hide(1000)
});
$("#toggle").click(function () {
$("img").toggle(1000)
});
//回调函数:当某一个动作执行完成之后自动触发的函数
</script>
</html>
2 滑动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
line-height: 80px;
background-color: darkblue;
color: #cccccc;
text-align: center;
} </style>
</head>
<body>
<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button>
<div id="con">滑动效果</div>
</body>
<script src="jquery-3.2.1.js"></script> <script>
$("#slideDown").click(function () {
$("#con").slideDown(1000)
});
$("#slideUp").click(function () {
$("#con").slideUp(1000)
});
$("#toggle").click(function () {
$("#con").toggle(1000)
});
</script>
</html>
3 淡入淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{
width: 200px;
height: 200px;
background-color: aquamarine; }
</style>
</head>
<body>
<div class="con"></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#fadeIn").click(function () {
$(".con").fadeIn(2000)
});
$("#fadeOut").click(function () {
$(".con").fadeOut(2000)
});
$("#fadeToggle").click(function () {
$(".con").fadeToggle(2000)
});
$("#fadeTo").click(function () {
$(".con").fadeTo(2000,0.4)
})
</script>
</body>
</html>
jquery第二篇的更多相关文章
- jQuery第二篇 (帅哥)
1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果 选择器 基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基 ...
- Jquery第二篇【选择器、DOM相关API、事件API】
前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...
- 第二篇.Bootstrap起步
第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
- 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- [ 高并发]Java高并发编程系列第二篇--线程同步
高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...
- 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
随机推荐
- IPC$概念及入侵方式研究
catalogue . 什么是IPC$ . IPC$攻击方式 . 漏洞检测与防御措施 1. 什么是IPC$ IPC$(空会话连接)是windows系统内置的一个功能模块,它的作用有很多(包括域帐号枚举 ...
- openstack项目【day23】:keystone组件HTTP协议
阅读目录 一 为何要学习HTTP协议 二 用户上网过程 三 HTTP协议 part1 http协议概述 part2 请求协议 part3 响应协议 四 抓包分析HTTP协议 一 为何要学习HTTP协议 ...
- Hadoop记录- Yarn scheduler队列采集
#!/bin/sh ip=10.116.100.11 port=8088 export HADOOP_HOME=/app/hadoop/bin rmstate1=$($HADOOP_HOME/yarn ...
- /etc/profile文件被改坏导致命令不可用
这几天在装一个软件,设置环境变量的时候,不小心把/etc/profile文件改坏了(就是没配置对),在source /etc/profile后导致所有命令都不可用了.出现如下报错: -bash: xx ...
- 删除对象的某个属性 delete
有时候我们可能会遇到需要删除一个对象的某个属性的这种情况,保留剩下的,不想遍历,那我们就可以使用delete操作符, let obj = { a: 1, b: 2, c: 3 } delete obj ...
- win10下maven的安装与配置
下载apache-maven-3.5.3-bin.zip并解压: 环境配置: 系统环境:添加=>MAVEN_HOME 值为apache-maven-3.5.3的路径(D:\xxx\apache- ...
- win10免安装版本的MySQL的下载安装和配置
下载mysql-xxx.zip(免安装版) 解压到自己想要的目录下(我的是D:\mysql\),打开mysql-5.7.21-winx64文件夹,新建my.ini文件,输入: [mysql] # 设置 ...
- 设计模式六: 模板方法(Template Method)
简介 模板方法属于行为型模式的一种. 实现层面上, 在抽象类中定义了算法或流程的骨架, 将其中易变的部分延迟到子类实现, 也就是允许它的子类实现其中的某些步骤. 模板方法适用于算法不变, 但算法中某些 ...
- C#(在WeBAPI)获取Oracle(在PL/SQL)游标类型的存储过程(用到了RefCursor)
需求:WebAPI服务端,通过Oracle数据库的存储过程,获取数据. 在PL/SQL 建立存储过程:(先来最简单的,就是把整个表都查出来) create or replace procedure S ...
- 简单对比git pull和git pull --rebase的使用
使用下面的关系区别这两个操作:git pull = git fetch + git mergegit pull --rebase = git fetch + git rebase 现在来看看git m ...