jQuery 练习 dom
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border-bottom: 1px solid coral;
padding-bottom: 10px;
} .input_light {
background-color: yellow;
} .li_bg {
background-color: red;
} table,
tr,
td {
border: 1px solid;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function() {
//控件的高亮显示
$("div:first input").focus(function() {
$(this).addClass("input_light").siblings().removeClass("input_light");
}); //球队选择
$("div:eq(1) ul:first li").mouseover(function() {
$(this).addClass("li_bg").siblings().removeClass("li_bg");
});
$("div:eq(1) ul:first li").click(function() {
$(this).remove("li").removeClass("li_bg");
$("div:eq(1) ul:eq(1)").append($(this));
});
//搜索文本框
$("div:eq(2) #txt_search").focus(function() {
if ($(this).val() == "请输入搜索关键词") {
$(this).val("");
}
});
$("div:eq(2) #txt_search").blur(function() {
if ($(this).val() == "") {
$(this).val("请输入搜索关键词");
}
});
//文本框焦点
$("div:eq(3) input:text").focus(function() {
if (!$(this).hasClass("li_bg")) {
$(this).addClass("li_bg");
} else {
$(this).removeClass("li_bg").siblings().addClass("li_bg");
}
});
//无刷新评论
$("div:last button").click(function() {
if ($("#userName").val() == "" || $("#comments").val() == "") {
alert("用户名或评论不能为空");
} else {
var userName = $("#userName").val();
var comments = $("#comments").val();
$("table").append("<tr><td>" + userName + "</td><td>" + comments + "</td></tr>");
} }); })
</script>
</head> <body>
<!-- 控件的高亮显示 -->
<div>
<input type="button" value="按钮一">
<input type="button" value="按钮二">
<input type="text">
<input type="text">
<input type="checkbox">选择框
<input type="radio" name="rad1">单选1
<input type="radio" name="rad1">单选2
</div>
<!-- 球队选择 -->
<div>
<ul>
<li title="夜雨沧神">夜雨沧神</li>
<li title="荧祸守心">荧祸守心</li>
<li title="剑子仙迹">剑子仙迹</li>
<li title="佛剑分说">佛剑分说</li>
</ul>
<ul></ul>
</div>
<!-- 搜索文本框 -->
<div>
请输入搜索关键词:<input type="text" id="txt_search" value="请输入搜索关键词"><button>搜索</button>
</div>
<!-- 文本框焦点 -->
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<!-- 无刷新评论 -->
<div>
<table>
<tr>
<td>昵称</td>
<td>评论</td>
</tr>
</table>
昵称:<input type="text" id="userName">
<br/> 评论: <input type="text" id="comments">
<button>评论</button>
</div>
</body> </html>
jQuery 练习 dom的更多相关文章
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- jquery和dom之间的转换
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
随机推荐
- Spring AOP(转)
原文:Spring实现AOP的4种方式 Spring AOP 详解 Spring实现AOP的4种方式 先了解AOP的相关术语:1.通知(Advice):通知定义了切面是什么以及何时使用.描述了切面要完 ...
- jnhs-netbeans maven Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.4.1:clean (default-clean) on project
w 无法完成清理 出现这种错误,通常是由于启动了另一个tomcat 进程或者运行的javaw.exe进程,导致报错. 直接运行工程启动后再清理就好了 或者 重启大法
- 使用springMvc对象属性自动封装从jsp向controller传值
controller通过ModelAndView向前台传传递信息 jsp也可以通过model向controller传递信息 这只是其中的一个办法,还有其他几种方式进行前后端的数据交互 如何才能让spr ...
- linux 下建立桌面快捷方式
这段时间从windows转到了Linux,发现桌面上没有快捷方式很不适应,找了好久资料,找到解决方法,记录下来以后备用 1.首先建立一个新文件 ``` vi quick.desktop //后缀为de ...
- MacBook下为要运行的.net core 项目指定sdk版本
安装完.net core 3.0,运行早期版本构建的项目遇到运行错误,查阅官方文档解决问题,特此记录!官方原文如下: SDK 使用最新安装的版本 SDK 命令包括 dotnet new 和 dotne ...
- 优化SQL之最快等价SQL
SQL优化工具Tosska SQL Tuning Expert for Oracle,帮助SQL开发人员解决SQL性能问题. 本工具主要创始人Richard To, 资深ITPUB元老,从1996年开 ...
- mvp例子与MVVM例子
VMP例子 <!-- 从百度CDN上面找个jquery的链接 --> <!DOCTYPE html> <html lang="en"> < ...
- Qt: error lnk1158 无法运行rc.exe
解决办法:(依据自己的环境而定) 将C:\Program Files (x86)\Windows Kits\\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制 ...
- MS17-010远程溢出漏洞 - 永恒之蓝 [CVE-2017-0143]
MS17-010远程溢出漏洞(永恒之蓝) Ti:2019-12-25 By:Mirror王宇阳 MS17-010 CVE-2017-0143 MS17-010 CVE-2017-0144 MS17-0 ...
- 深入探索WebSockets
WebSockets简介 在2008年中期,开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限. 通过在IRC和W3C邮 ...