jQuery筛选器及对DOM修改（学习笔记）
1.jQuery筛选器
注意：请先在管理Nuget程序包中查找jQuery包，并安装。也可以在jQuery官网下载。
实现：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function () { //相当于onload = function(){};等页面元素加载完成后调用内部内容。
$('*').css('color', 'Green'); //通用选择器
$('#Sidebar').css('border-bottom', '2px solid red'); //id选择器
$('h1').bind('click', function () { alert('Hell world') }); //元素选择器
$('.示范类').addClass('稍等片刻').hide(10000); //类选择器
$('footer , header').slideUp('slow').slideDown('slow'); //分组选择器
$('#Sidebar img').fadeTo(5000, 0.5); //合并选择器
});
</script>
</head>
<body id="dv">
<form id="form1" runat="server">
<div>
<header>页眉</header>
<div id="Sidebar">
<p>我是sidebar中的文字，图片君在下面</p>
<img src="resource/QQ图片20150617105836.jpg" style="height :150px;width:150px" />
</div>
<h1>基本选择器</h1>
<div class ="示范类">我是一个div，我要消失了</div>
<footer>页脚</footer>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>筛选器</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function () {
//基本筛选器
$('#测试表').css('background-color', 'green');
$('#测试表 tr:first').css('background-color', 'red');
$('#测试表 tr:last').css('background-color', 'red');
$('#测试表 tr:odd').css('background-color', 'red');
$('#测试表 tr:eq(0)').css('background-color', 'green');
$('#测试表 tr:eq(2)').css('background-color', 'green');
$('#测试表 tr:eq(4)').css('background-color', 'green');
$(':header').css('color', 'green');
//高级筛选器
$('td:contains("3行")').css('color', 'green');
$(':header:has("span")').css('color', 'green');
$('[type]').css('color', 'green');
$('input[type]').css('color', 'green');
$('[type=text]').css('color', 'green');
$(':button ,:text').css('color', 'green');
$(':checkbox').attr('checked',true);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 title="头部">第一部分</h1>
<table id="测试表">
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
<tr><td>3行1列</td><td>3行2列</td></tr>
<tr><td>4行1列</td><td>4行2列</td></tr>
<tr><td>5行1列</td><td>5行2列</td></tr>
</table>
<h2>
第二<span style="font-style:initial;font-weight:bold;">部分</span>
</h2>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text"/>
<input id="CheckBox1" type="checkbox" />
<input id="CheckBox2" type="checkbox" />
</div>
</form>
</body>
</html>
2.对DOM的修改
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQ修改DOM</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//css方法
$(function () {
//css方法
$('h1').css('background-color', 'green');//css(属性，值)
alert($('h2 span').css('font-style'));//css(属性)
$('#测试表 td').css({ 'color': 'red', 'font-family': 'Verdana', 'padding': '0px' });//css(样式表)
$('h2').addClass('稍等片刻');
$('h2').removeClass('稍待片刻');//使用addClass,removeClass,toggleClass来进行类操作
alert($('h1').attr('title'));//attr(属性名)
$(':checkbox').attr('checked', 'checked');//attr(属性名,属性值)
//事件
$('#测试表 tr')
.bind('mouseover', function () { $(this).css('background-color', 'yellow') })
.bind('mouseout', function () { $(this).css('background-color', '') });
//jQ功能
$('#测试表 td').each(function () {//each遍历一个集合
alert(this.innerHTML);
});
alert($('#测试表 td:contains("1行2列")').prev()[0].innerHTML);//prev匹配元素直系兄弟
alert($('#测试表 td:contains("1行2列")').parent()[0].innerHTML);//方法返回被选元素的直接父元素
});
</script>
</head>
<body>
<h1 title="头部">第一部分</h1>
<table id="测试表">
<tr><td>1行1列</td><td>1行2列</td></tr>
<tr><td>2行1列</td><td>2行2列</td></tr>
<tr><td>3行1列</td><td>3行2列</td></tr>
<tr><td>4行1列</td><td>4行2列</td></tr>
<tr><td>5行1列</td><td>5行2列</td></tr>
</table>
<h2>
第二<span style="font-style:inherit;font-weight:bold;">部分</span>
</h2>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="CheckBox1" type="checkbox" />
<input id="CheckBox2" type="checkbox" />
</body>
</html>
jQuery筛选器及对DOM修改（学习笔记）的更多相关文章
- jQuery 筛选器1
jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...
- jQuery 筛选器2
jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...
- HTML DOM（学习笔记二）
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- HTML DOM简易学习笔记
文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...
- jQuery筛选器及练习
jQuery初识 jQuery是什么? jQuery是一个兼容多浏览器的JavaScript库. jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less, ...
- 【jQuery】jQuery筛选器规则
转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...
- jQuery筛选器常用总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery笔记-jQuery筛选器children()详解
jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...
随机推荐
- sendmail启动报错
sendmail启动不了,报错如下: 解决方法: 在/etc/mail/sendmail.cf 配置文件中查找 Dj$w,并在此行下面增加这一行. Dj$w. 在/etc/hosts 增加一行 192 ...
- HDU 1009 FatMouse' Trade（简单贪心）
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1009 FatMouse' Trade Time Limit: 2000/1000 MS (Java/O ...
- mavan下scala编译中文乱码的问题.以及内存溢出问题解决
网上都没有找到我这个问题.都是自己解决的.也不知道后来者能不能遇到 关键字: java.lang.StackOverflowError scala not found scala <config ...
- java eclipse 访问 Oracle数据库的代码
package com.hanqi.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.R ...
- Java 循环结构
Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...
- react系列（二）高阶组件-HOC
高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...
- platform平台总线
一.何为平台总线 (1)相对于usb.pci.i2c等物理总线来说,platform总线是虚拟的.抽象出来的.(2)CPU与外部通信的2种方式:地址总线式连接和专用协议类接口式连接.平台总线,是扩展到 ...
- 轻量ORM-SqlRepoEx （十）SqlRepoEx Nuget包下载说明
ORM-SqlRepoEx 是 .Net平台下兼容.NET Standard 2.0,一个实现以Lambda表达式转转换标准SQL语句,使用强类型操作数据的轻量级ORM工具,在减少魔法字串同时,通过灵 ...
- 小K的农场（差分约束，spfa）
题目描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述: 农场a比农场b至少多种植了c个单位的作 ...
- Pagination
using System.Collections.Generic; namespace Oyang.Tool { public interface IPagination { int PageInde ...