day20190915write from memory

jQuery_Chapter02_20190912/ jQuery操作类样式.html

<!DOCTYPE html>

<html>

<head>

<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>

$(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>

<title>jQuery的节点操作_append</title>

</head>

<body>

<ul>

<li>放假第一天,干嘛?</li>

<li>放假第二天,干嘛?</li>

<li>放假第三天,干嘛?</li>

</ul>

</body>

$(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>

<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>

$(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>

<title>过滤选择器_可见性过滤</title>

</head>

<body>

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

</body>

/*页面加载*/

$(function(){

//操作隐藏的数据

$("tr:hidden").css("display","block");

//操作显示的数据

//$("tr:visible").css("display","none");

});

</script>

</html>

jQuery_Chapter02_20190912/ 过滤选择器_基本过滤.html

<!DOCTYPE html>

<html>

<head>

<title>过滤选择器_基本过滤</title>

</head>

<body>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

/*页面加载*/

$(function(){

$("ul li:first").css("background","pink");

/*隔行换色*/

$("ul :odd").css("border","1px solid green");

});

</script>

</html>

jQuery_Chapter02_20190912/ 过滤选择器_表单选择器_表单对象属性选择器.html

<!DOCTYPE html>

<html>

<head>

<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="sex" id="boy" value="男1"/>男

<input type="radio" name="sex" id="girl" value="女1" checked="checked"/>女

<br />

爱好:<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

<button onclick="btnRadio()">点击获取表单radio单选框的元素</button>

<button onclick="btnCheckbox()">点击获取表单checkbox复选框的元素</button>

<button onclick="btnChecked()">点击表单radio/checkbox(单选/复选)选中的的元素</button>

<h2>获取表单radio单选框的元素:</h2>

<h2>获取表单checkbox复选框的元素:</h2>

<h2>获取表单radio/checkbox(单选/复选)选中的的元素:</h2>

</body>

//定义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()+"  ";

}

//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()+"  ";

});

$("#c").html(str);

}

function btnChecked(){

var checkeds = $(":checked"); //:checked 表单对象属性选择器

var str = "";

$.each(checkeds,function(i){

str += $(checkeds[i]).val()+"  ";

});

$("#ch").html(str);

}

</script>

</html>

jQuery_Chapter02_20190912/ js

day20190915write from memory的更多相关文章

【NX二次开发】NX内部函数，libugui.dll文件中的内部函数
本文分为两部分:"带参数的函数"和 "带修饰的函数". 浏览这篇博客前请先阅读: [NX二次开发]NX内部函数,查找内部函数的方法带参数的函数: bool A ...
Java 堆内存与栈内存异同(Java Heap Memory vs Stack Memory Difference)
--reference Java Heap Memory vs Stack Memory Difference 在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有 ...
笔记：Memory Notification: Library Cache Object loaded into SGA
笔记:Memory Notification: Library Cache Object loaded into SGA在警告日志中发现一些这样的警告信息:Mon Nov 21 14:24:22 20 ...
浅析java内存模型--JMM(Java Memory Model)
在并发编程中,多个线程之间采取什么机制进行通信(信息交换),什么机制进行数据的同步? 在Java语言中,采用的是共享内存模型来实现多线程之间的信息交换和数据同步的. 线程之间通过共享程序公共的状态,通 ...
mysqld: Out of memory 解决办法(mysql)
自己配置的XWAMP环境,默认下没有详细配置mysql的my.ini,一方面不同服务器的配置不一样,另一方面按照默认为空的方式也一直没有出现过问题.不过最近服务器挂掉了,出现的症状是: 网站不能打开, ...
【译】Getting Physical With Memory
当我们试图去了解复杂系统时,去除其抽象层,直接关注最底层,我们会更容易去理解.使用这种方法,我们来看一下内存和 I/O 接口的最简单和基础的层:处理器和总线的接口.这些细节是更上层问题的基础,例如线程 ...
使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题
一.前言最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...
Android中基于CGroup的memory子系统HAL层分析-lmkd
Android在内存管理上于Linux有些小的区别,其中一个就是引入了lowmemorykiller.从lowmemorykiller.c位于drivers/staging/android也可知道,属 ...
Automated Memory Analysis
catalogue . 静态分析.动态分析.内存镜像分析对比 . Memory Analysis Approach . volatility: An advanced memory forensics ...

随机推荐

mysql笔记一
普通操作, 查看数据库的大小,SELECT sum(DATA_LENGTH)+sum(INDEX_LENGTH) FROM information_schema.TABLES where TABLE_ ...
Docker配置整理
目录: 以非root用户身份管理Docker 配置Docker以在启动时启动配置Docker守护程序监听连接的位置以非root用户身份管理Docker 默认情况下,Docker运行权限由用户roo ...
阿里巴巴 Kubernetes 应用管理实践中的经验与教训
作者 | 孙健波(阿里巴巴技术专家).赵钰莹导读:云原生时代,Kubernetes 的重要性日益凸显.然而,大多数互联网公司在 Kubernetes 上的探索并非想象中顺利,Kubernetes 自 ...
Python3.8更新特性
Python 3.8.0稳定版部分新特性: • PEP 572,赋值+表达式 :=可以将一个表达式或者一个 if (n := len(a)) > 10:#表达式仍然用,赋值也放一起,后面不用多 ...
open_basedir限制目录
1.open_basedir介绍前言:前些日我用lnmp一键安装包出现了open_basedir的问题,因为我把项目目录变了,所以要在的fastcgi.conf下面加上open_basedir的目录 ...
从函数计算架构看 Serverless 的演进与思考
作者 | 杨皓然阿里巴巴高级技术专家导读:云计算之所以能够成为 DT 时代颠覆性力量,是因为其本质是打破传统架构模式.降低成本并简化体系结构,用全新的思维更好的满足了用户需求.而无服务器计算(S ...
【暂时停更】Gungame更新下载平台
v1.0: 这是本游戏的第一个版本, 制作于2019.4.12. 控制 : Player1: wsad为移动, r键开炮(有朝向限制) Player2: ikjl为移动, p键开炮(有朝向限制) 下载 ...
ctf pwn ida 分析技巧
几年前的笔记,搬运过来 --- 1 先根据运行程序得到的信息命名外围函数,主要函数大写开头 2 /添加注释 3 直接vim程序,修改alarm为isnan可以patch掉alarm函数 4 y 可 ...
python 爬取豆瓣书籍信息
继爬取猫眼电影TOP100榜单之后,再来爬一下豆瓣的书籍信息(主要是书的信息,评分及占比,评论并未爬取).原创,转载请联系我. 需求:爬取豆瓣某类型标签下的所有书籍的详细信息及评分语言:pyth ...
SQL Server 中 `JSON_MODIFY` 的使用
SQL Server 中 JSON_MODIFY 的使用 Intro SQL Server 从 2016 开始支持了一些 JSON操作,最近的项目里也是好多地方直接用字段直接存成了 JSON,需要了解 ...

day20190915write from memory

day20190915write from memory的更多相关文章

随机推荐

热门专题