jQuery_Chapter02_20190912/ jQuery操作类样式.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作类样式</title>
<style>
.d{
border: 1px solid royalblue;
width: 500px;
margin: 0px auto;
text-align: center;
line-height: 32px;
}
.pink{
color: deeppink;
}
</style>
</head>
<body>
<h2>添加类样式</h2>
<div>
1.使用jQuery封装的循环遍历方法 each
<br />
2.使用jQuery封装的循环遍历方法 each
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//jQuery绑定单击事件
//事件绑定语法: $(选择器).事件名(function(){ });
/*$("h2").click(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//添加类样式
$("div").addClass("d pink");
});*/
//h2鼠标移进事件
$("h2").mouseover(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//添加类样式
$("div").addClass("d pink");
});
 
//h2鼠标移出事件
$("h2").mouseout(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//移除类样式
$("div").removeClass("pink");
});
})
</script>
</body>
</html>

jQuery_Chapter02_20190912/ jQuery的节点操作_append.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的节点操作_append</title>
</head>
<body>
<ul>
<li>放假第一天,干嘛?</li>
<li>放假第二天,干嘛?</li>
<li>放假第三天,干嘛?</li>
</ul>
<input type="button" id="btn" value="插入节点" />
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//button按钮的单击事件绑定
$("#btn").click(function(){
/*节点的内部插入*/
//创建一个新的li标签
var newLi = "<li>放假第n天,干嘛?</li>";
/*$("ul").html(newLi);*/
//插入节点
// $(A).append(B); 将B元素追加到A元素中,前提条件是A元素得存在
$("ul").append(newLi);
 
//$(A).appendTo(B); 将A元素追加到B元素中
//$(newLi).appendTo("ul");
 
$("ul").prepend(newLi);
 
 
/*节点外部插入*/
$("ul").after("<li>1111</li>");
});
});
</script>
</html>

 jQuery_Chapter02_20190912/ jQuery的节点操作_删除_替换_克隆.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的节点操作_删除_替换_克隆</title>
<style>
.red{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>放假第一天,干嘛?</li>
<li>放假第二天,干嘛?</li>
<li>放假第三天,干嘛?</li>
<li>放假第n天,干嘛?</li>
</ul>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//给第一个li标签绑定删除单击事件_清空文本
$("li:first").click(function(){
/*$("li:first").empty(); */ //empty():清空文本,标签结构还存在
$(this).empty(); //此处this,代表的是li:first 元素
});
 
//给第二个li标签绑定删除单击事件_删除元素
//li:eq(index): 筛选过滤选择器,index下标从0开始
$("li:eq(1)").click(function(){
$(this).remove(); //remove():删除元素,标签结构也删除
});
 
//给第三个li标签绑定替换事件
$("li:eq(2)").click(function(){
var newReplace = "<li class='red'>没有假期,好好学习</li>";
//replaceAll 和 appendTo 一样的原理
//replaceWith 和 append 一样的原理
$(this).replaceWith(newReplace);
});
 
//给第四个li标签绑定克隆事件
$("li:eq(3)").click(function(){
//克隆的元素
/**
* 语法: $(选择器).clone(deep);
* deep : false/true; 默认false,只克隆当前元素,不克隆复制当前事件;
* true:克隆当前元素,也克隆复制当前事件;
*/
var cloneLi = $(this).clone(true);
//追加到ul标签下
$("ul").append(cloneLi);
 
});
})
</script>
</html>

jQuery_Chapter02_20190912/ 过滤选择器_可见性过滤.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_可见性过滤</title>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*页面加载*/
$(function(){
//操作隐藏的数据
$("tr:hidden").css("display","block");
//操作显示的数据
//$("tr:visible").css("display","none");
 
});
</script>
</html>
 jQuery_Chapter02_20190912/ 过滤选择器_基本过滤.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_基本过滤</title>
</head>
<body>
 
<!--div#d>ul>li*5-->
<div id="d">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*页面加载*/
$(function(){
$("ul li:first").css("background","pink");
/*隔行换色*/
$("ul :odd").css("border","1px solid green");
});
</script>
</html>
 jQuery_Chapter02_20190912/ 过滤选择器_表单选择器_表单对象属性选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_表单选择器_表单对象属性选择器</title>
<style>
div{
width:500px;
height: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
用户名: <input type="text" name="" value=""/>
<br />
<!--input[type='radio'name=''id='' value='']*2-->
性别:<input type="radio" name="sex" id="boy" value="男1"/>男
<input type="radio" name="sex" id="girl" value="女1" checked="checked"/>女
<br />
<!--input[type='checkbox' name='hobby' id='' value='']*3-->
 
爱好:<input type="checkbox" name="hobby" id="sing" value="唱唱"/>唱
<input type="checkbox" name="hobby" id="jump" value="跳跳"/>跳
<input type="checkbox" name="hobby" id="rap" value="raprap"/>rap
 
<br /><br />
<button onclick="btnRadio()">点击获取表单radio单选框的元素</button>
<br /><br />
<button onclick="btnCheckbox()">点击获取表单checkbox复选框的元素</button>
<br /><br />
<button onclick="btnChecked()">点击表单radio/checkbox(单选/复选)选中的的元素</button>
 
<!--div#*3-->
<h2>获取表单radio单选框的元素:</h2>
<div id="r"></div>
 
<h2>获取表单checkbox复选框的元素:</h2>
<div id="c"></div>
 
<h2>获取表单radio/checkbox(单选/复选)选中的的元素:</h2>
<div id="ch"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
//定义js函数
function btnRadio(){
//获取表单的单选元素
// val()/val(参数) : 获取/设置value属性的值,是jQuery操作标签value属性的方法
var radios = $("input:radio"); //:radio 表单选择器
var str = ""; //定义js变量,用来存储获取的多个值上
//js的循环遍历方式
for(var i = 0; i<radios.length; i++){
str += $(radios[i]).val()+"&nbsp;&nbsp;";
}
//console.log(str);
$("#r").html(str);
}
 
function btnCheckbox(){
var checkboxs = $(":checkbox"); //:checkbox 表单选择器
//定义js变量
var str = "";
//使用jQuery封装的循环遍历方法 each
// 语法: $(选择器).each(遍历的集合对象,function(i){ });
$.each(checkboxs,function(i){
str += $(checkboxs[i]).val()+"&nbsp;&nbsp;";
});
$("#c").html(str);
}
 
function btnChecked(){
var checkeds = $(":checked"); //:checked 表单对象属性选择器
var str = "";
$.each(checkeds,function(i){
str += $(checkeds[i]).val()+"&nbsp;&nbsp;";
});
$("#ch").html(str);
}
 
</script>
</html>

day20190915write from memory的更多相关文章

  1. 【NX二次开发】NX内部函数，libugui.dll文件中的内部函数

    本文分为两部分:"带参数的函数"和 "带修饰的函数". 浏览这篇博客前请先阅读: [NX二次开发]NX内部函数,查找内部函数的方法 带参数的函数: bool A ...

  2. Java 堆内存与栈内存异同(Java Heap Memory vs Stack Memory Difference)

    --reference Java Heap Memory vs Stack Memory Difference 在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有 ...

  3. 笔记：Memory Notification: Library Cache Object loaded into SGA

    笔记:Memory Notification: Library Cache Object loaded into SGA在警告日志中发现一些这样的警告信息:Mon Nov 21 14:24:22 20 ...

  4. 浅析java内存模型--JMM(Java Memory Model)

    在并发编程中,多个线程之间采取什么机制进行通信(信息交换),什么机制进行数据的同步? 在Java语言中,采用的是共享内存模型来实现多线程之间的信息交换和数据同步的. 线程之间通过共享程序公共的状态,通 ...

  5. mysqld: Out of memory 解决办法(mysql)

    自己配置的XWAMP环境,默认下没有详细配置mysql的my.ini,一方面不同服务器的配置不一样,另一方面按照默认为空的方式也一直没有出现过问题.不过最近服务器挂掉了,出现的症状是: 网站不能打开, ...

  6. 【译】Getting Physical With Memory

    当我们试图去了解复杂系统时,去除其抽象层,直接关注最底层,我们会更容易去理解.使用这种方法,我们来看一下内存和 I/O 接口的最简单和基础的层:处理器和总线的接口.这些细节是更上层问题的基础,例如线程 ...

  7. 使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题

    一.前言 最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...

  8. Android中基于CGroup的memory子系统HAL层分析-lmkd

    Android在内存管理上于Linux有些小的区别,其中一个就是引入了lowmemorykiller.从lowmemorykiller.c位于drivers/staging/android也可知道,属 ...

  9. Automated Memory Analysis

    catalogue . 静态分析.动态分析.内存镜像分析对比 . Memory Analysis Approach . volatility: An advanced memory forensics ...

随机推荐

  1. 前端技术之：webpack热模块替换（HMR）

    第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware   第二步:webpack配置中引入webpack对象     const we ...

  2. Spring 动态代理 之 but was actually of type 'com.sun.proxy.$Proxy14 Exception

    今天在写Spring的引介代理的时候,报了一个错: Exception in thread "main" org.springframework.beans.factory.Bea ...

  3. 【CF696D】Legen...（AC自动机）（矩阵快速幂）

    题目描述 Barney was hanging out with Nora for a while and now he thinks he may have feelings for her. Ba ...

  4. [考试反思]1014csp-s模拟测试73：侵蚀

    嗯...还是没有改变那个现状 依旧只是打满了暴力,虽说T2打的的确比暴力好很多,但是因为出题人没有设分所以和暴力等同. 离上面的分差还是大的很,下面还是追的很紧 而且进几场的排名也是连续下滑... 虽 ...

  5. VNC的安装以及使用

    VNC (Virtual Network Console)是虚拟网络控制台的缩写.它 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNIX 和  ...

  6. 底半部之工作队列和tasklet，内核定时器。

    1.软中断机制  不能以模块形式出现   使用起来不够灵活2.tasklet  核心数据结构       struct tasklet_struct      {          function  ...

  7. PHP str_replace的用法

    PHP str_replace的用法 1 替换单个字符<pre><?phpecho str_replace("world","Shanghai" ...

  8. 『嗨威说』算法设计与分析 - PTA 程序存储问题 / 删数问题 / 最优合并问题（第四章上机实践报告）

    本文索引目录: 一.PTA实验报告题1 : 程序存储问题 1.1 实践题目 1.2 问题描述 1.3 算法描述 1.4 算法时间及空间复杂度分析 二.PTA实验报告题2 : 删数问题 2.1 实践题目 ...

  9. 微服务SpringCloud之GateWay熔断、限流、重试

    纯洁的微笑的Spring Cloud系列博客终于学完了,也对Spring Cloud有了初步的了解. 修改请求路径的过滤器 StripPrefix Filter 是一个请求路径截取的功能,我们可以利用 ...

  10. 设计模式（Java语言）-单例模式

    单例模式,简而言之就是在整个应用程序里面有且仅有一个实例,在程序的任何时候,任何地方获取到的该对象都是同一个对象.单例模式解决了一个全局的类被频繁创建和销毁的,或者每次创建或销毁都需要消耗大量cpu资 ...