使用jQuery操作dom（追加和删除样式-鼠标移入移出）练习
1.实现鼠标移入则添加背景色，鼠标移出则删除背景色
<!DOCTYPE html>
<html>
<head>
<title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style type="text/css">
.abc{
background:red;
}
</style>
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).addClass("abc");
});
$("li").mouseout(function(){
$(this).removeClass("abc");
});
});
</script>
</head> <body>
<ul>
<li>apple</li>
<li>banana</li>
<li>pear</li>
<li>oragle</li>
</ul>
</body>
</html>
2.实现QQ登录功能，默认是用户名点击则为空等待用户输入
第一种：click
<!DOCTYPE html>
<html>
<head>
<title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$(this).val("");
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" value="用户名"><br></td>
</tr>
<tr>
<td>密码 ：</td>
<td><input type="password" id="password" value="密码"><br></td>
</tr>
</table>
</form>
</body>
</html>
第二种：（**）
<!DOCTYPE html>
<html>
<head>
<title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style type="text/css">
.a{
opacity:0.5;
}
</style>
<script type="text/javascript">
$(function(){
$("input").on("focus",function(){//获得焦点
$(this).removeClass("a");
if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){
$(this).val("");
}else{
$(this).select();
}
})
.on("blur",function(){
if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){
$(this).val("please input password");
$(this).addClass("a");
}else{
$(this).removeClass();
}
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>password：</td>
<td><input type="text" id="username" class="a" value="please input password"><br></td>
</tr>
</table>
</form>
</body>
</html>
使用jQuery操作dom（追加和删除样式-鼠标移入移出）练习的更多相关文章
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- jQuery权威指南（第2版） 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- *jquery操作DOM总结 (原创：最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
随机推荐
- spring boot修改内置容器tomcat的服务端口
方式一 在spring boot的web 工程中,可以使用内置的web container.有时需要修改服务端口,可以通过配置类和@Configuration注解来完成. // MyConfigura ...
- SSL_TLS
http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html 配置 IBM HTTP Server 以支持 TLS 1.2 http://www-01.ibm ...
- [转]华 使用npm安装一些包失败了的看过来（npm国内镜像介绍）
发布于 5 年前 作者 wppept 275957 次浏览 最后一次编辑是 1 年前 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置 ...
- linux下面which whereis find locate的使用
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which ...
- JavaScript的条件运算符与条件语句
1.条件运算符 比较运算符 == 判断左右两边数据的值是否相等 === 判断左右两边数据的之是否相等,同时还判断两边的数据类型是否一样 != 比较运算符的比较结果都是布尔值,true或者f ...
- k8s的Health Check（健康检查）
强大的自愈能力是 Kubernetes 这类容器编排引擎的一个重要特性.自愈的默认实现方式是自动重启发生故障的容器.除此之外,用户还可以利用 Liveness 和 Readiness 探测机制设置更精 ...
- ORM-班级信息系统
ORM版学员管理系统 班级表 表结构 class Class(models.Model): id = models.AutoField(primary_key=True) # 主键 cname = m ...
- yii2中判断值是否存在二维数组中
//在yii2中,在类里面的函数,可以不加action $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); / ...
- AC日记——平衡树练习 codevs 4244
4244 平衡树练习 思路: 有节操的人不用set也不用map: 代码: #include <cstdio> #include <cstring> #include <i ...
- 【转载】Linux kill, killall, kill -9
1) 查看进程的方法: ps -ef 或者 ps aux root 15087 0.0 0.0 0 0 ? S 23:31 0:00 [kwo ...