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') 获 ...
随机推荐
- hibernate hql语句 group by having 的坑
我期望获得这个列表 然而,使用hql只能获得第一条数据,后来我琢磨了一下,和group by有关系 应该改成 成功查询到
- Django ORM中的查询，删除，更新操作
ORM查询操作 修改views.py文件 from django.shortcuts import render, HttpResponse from app01 import models from ...
- <a>标签操作
1.点击后onclick事件失效,变灰,不可用 onclick(this); //事件传递this对象 function viewMm(obj) { $(obj).removeAttr("o ...
- Centos系统Python环境搭建和项目部署
目录 一.Python 1. 源安装 Python3 2. SCL安装 Python3 3. 虚拟环境venv 4. 安装Flask 5. 安装gunicorn 二.安装Nginx 1. 安装Ngin ...
- TextBlock中显示文字和图片，且不会自动换行
原本TextBlock显示图片是很容易的,即TextBlock.Inlines.Add(UiElement element):这个方法即可, 但是,会出现如下效果: 我不想要这种效果,所以改了下代 ...
- ASP.NET Core 中使用TypeScript
ASP.NET Core 注意:Visual Studio 2017和最新版本的ASP.NET的更新即将推出! 安装 ASP.NET Core 和 TypeScript 首先,若有必要请安装 ASP. ...
- 移动HTML5前端框架—MUI
前 言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...
- 会话技术之Session（购物车加入、查看和清空）
会话技术之Session session:服务器端会话技术 当我们第一次访问的服务器的时候,服务器获取id, 能获取id 要拿着这个id去服务器中查找有无此session 若查找到了:直接拿过来将数据 ...
- Leetcode892.Surface Area of 3D Shapes三维形体的表面积
在 N * N 的网格上,我们放置一些 1 * 1 * 1 的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. 返回结果形体的总表面积. 示例 1: ...
- POJ 2078
16ms 解法: #include <cstdio> //using namespace std; ][]; ][]; ]; ]; int n,min,max; void solve(in ...