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

随机推荐

平时服务正常，突然挂了，怎么重启都起不来，查看日志Insufficient space for shared memory file 内存文件空间不足
Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file: /tmp/hsperfd ...
(Git) 优秀Java,Vue项目推荐
Java 1.spring-boot-pay 地址:小柒2012/spring-boot-pay 这是一个支付案例,提供了包括支付宝.微信.银联在内的详细支付代码案例,对于有支付需求的小伙伴来说,这个 ...
SSM简易版
技术准备 Java: 基础知识框架: Spring,SpringMVC,Mybatis 数据库: Mysq 开发工具: Eclipse,Maven 项目结构数据库设计创建数据库:student ...
VBoxManage.exe: error: Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, CL SID_VirtualBox w/ IUnknown works.
我先把vagrantbox卸载了重新装了一个然后提示这个错误当时我一脸蒙逼后来经过百度 1, win+r 快捷键打开 “运行”,输入regedit 打开注册表 2,找到 HKEY_CLASSE ...
RTKLib的Manual解读
Key-word: integer ambiguity resolution :整周模糊度解算 navigation:导航 Kinematic:动态,RTK的K rover:漫游 validation ...
C++学习笔记12_各种文件和引入
1. 编译过程预处理->编译->汇编->链接->.exe 预处理: ①将所有的“#define”删除,并且展开所有的宏定义 ②处理所有的条件编译指令,如:“#if”.“#if ...
磁盘冗余阵列之RAID10的配置
1988年由加利福尼亚大学伯克利分校发表的文章首次提到并定义了RAID,当今CPU性能每年可提升30%-50%但硬盘仅提升7%,渐渐的已经成为计算机整体性能的瓶颈,并且为了避免硬盘的突然损坏导致数据丢 ...
Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
GO 基础学习笔记（4）| 参数传递
Go 语言的命令行参数传递 //通过下面实操可知,通过命令行传递文件和参数可复制 1 package main 2 3 import( 4 "fmt" 5 "os&qu ...
Linux如何添加硬盘
一.命令操作: df #查看磁盘空间 fdisk #分区/查看分区 mkfs #格式化 df -h(以人类易读) -m(以M为单位读取) #查看硬 ...

day20190915write from memory

day20190915write from memory的更多相关文章

随机推荐

热门专题