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修改（学习笔记）的更多相关文章

  1. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  2. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  3. HTML DOM（学习笔记二）

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

  4. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  5. HTML DOM简易学习笔记

    文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...

  6. jQuery筛选器及练习

    jQuery初识   jQuery是什么? jQuery是一个兼容多浏览器的JavaScript库. jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less, ...

  7. 【jQuery】jQuery筛选器规则

    转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...

  8. jQuery筛选器常用总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

随机推荐

  1. git上传下载代码操作

    提交代码实质上都要走这样的操作 " 本地代码 --> 本地服务器"  "本地服务器 --> 远程服务器" 其实小伙伴就记住两个词就好了. Commi ...

  2. Jmeter--调度器配置

    Jmeter的线程组设置里有一个调配器设置,用于设置该线程组下脚本执行的开始时间.结束时间.持续时间及启动延迟时间.当需要半夜执行性能测试时会用到这个功能. ps:设置调度器配置,需要将前面的循环次数 ...

  3. React Native IOS ---基础环境搭建（前端架构师）

    React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...

  4. 【2017001】IList转DataTable、DataTable转IList

    IList转DataTable.DataTable转IList using System; using System.Collections.Generic; using System.Compone ...

  5. java中强引用、软引用、弱引用、幻象引用有什么区别？分别使用在什么场景？

    不同的引用类型,主要体现在对象的不同可达性(reachable)状态和对垃圾收集的影响. 1.强引用是我们最常见的普通对象引用,只要还有强引用指向一个对象,就表明对象还"活着",垃 ...

  6. mysql导出数据很快，导入很慢

    mysql导出快,导入特别慢的解决方法:在导入时添加两个参数:max_allowed_packet; net_buffer_length --max_allowed_packet   客户端/服务器之 ...

  7. 外键参数 onupdate,ondelete等（cascade,no adcion,set null,restrict）

    MySQL外键约束On Delete.On Update各取值的含义 先看On Delete属性,可能取值如上图为:No Action, Cascade,Set Null, Restrict属性. 当 ...

  8. excel批量转换为CSV格式，xls批量导出csv格式

    工具/原料   excel 2013 地址链接:http://pan.baidu.com/s/1c1ZABlu 密码:d3rc 方法/步骤     首选我们把需要导出为CVS的Excel文件整理集中到 ...

  9. 3D立方体

    效果图 主要用到的3D属性 1.保留子元素的3d属性:transform-style:preserve-3d; 2.2D变形属性: ①transform:translate()平移,分X轴,Y轴,Z轴 ...

  10. Java学习笔记二十八:Java中的接口

    Java中的接口 一:Java的接口: 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承 ...