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

随机推荐

BOOL，int，float，指针变量与“零值”比较的if语句
分别给出BOOL,int,float,指针变量与“零值”比较的 if 语句(假设变量名为var) 解答: BOOL型变量:if(!var) int型变量: if(var==0) float型变量: ...
用Unity做游戏，你需要深入了解一下IL2CPP
这次我们翻译了一篇Unity官方博客上的文章,原文题目为AN INTRODUCTION TO IL2CPP INTERNALS ,作者是从事Unity软件开发的Joshua Peterson.文章的看 ...
ubuntu & centos RTL88x2BU 无线网卡驱动（v5.1.7_19806）安装
前提大部分情况都是因为当前系统的内核不满足驱动文件的编译条件,可以通过驱动文件中的文档来确定是否要升级内核还是降级内核, 对于升级内核只需要下载指定的内核版本安装即可,降级内核(暂时不清楚是否会 ...
Bash 内置高效特性
变量(字符串)变换定义一个变量t,内容为framE [root@vm1 tmp]# t=framE 查看变量t的内容:echo $t或者是echo ${t} [root@vm1 tmp]# echo ...
Cookie、Session、Token那点事儿
1.什么是Cookie? Cookie 技术产生源于 HTTP 协议在互联网上的急速发展.随着互联网时代的策马奔腾,带宽等限制不存在了,人们需要更复杂的互联网交互活动,就必须同服务器保持活动状态(简称 ...
操作系统实现（一）：从Bootloader到ELF内核（转载）
原文链接: http://www.cppblog.com/airtrack/archive/2014/10/30/208729.html Bootloader 我们知道计算机启动是从BIOS开始,再由 ...
how2heap 源码及输出
备个份,慢慢写总结 1 first_fit #include <stdio.h> #include <stdlib.h> #include <string.h> i ...
CSPS_108
二逼出题人写错T1题面&&写伪T3std祭
Java基础语法01
一.Java入门 Java 是最好的语言吗? 不是,因为在每个领域都有更合适的编程语言. Java技术体系平台 JavaSE//JavaEE//JavaME Java程序的结构类{ 方法{ 语句; ...
软件 ---- idea启动
1.将配置转移到别的盘符,避免重做系统后,之前的配置就没了找到安装的位置,默认安装的话地址一般是 C:\Program Files\JetBrains\IntelliJ IDEA 2017.2 ID ...

day20190915write from memory

day20190915write from memory的更多相关文章

随机推荐

热门专题