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修改（学习笔记）

时间： 2024-08-04 16:05:23

jQuery筛选器及对DOM修改（学习笔记）的相关文章

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

HTML DOM（学习笔记二）

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

【DOM】学习笔记

三. 一份文档就是一颗节点树 节点类型:元素节点--属性节点.文本节点 getElementById()返回一个对象,对应一个元素节点 getElementByTagName()返回一个对象数组,分别对应一个元素节点 getAttribute() setAttribute() 四. childNodes nodeType nodeValue firstChild lastChild 五. DOM脚本编程习惯 预留后路 分离JS 向后兼容性 [DOM]学习笔记,布布扣,bubuko.com

jQuery筛选器

一.jQuery常用筛选器有以下几种: 1.下一个标签 $(document).next() 2.上一个标签 $(document).prev() 3.父亲标签 $(document).parent() 4.孩子标签 $(document).children() 5.兄弟标签 $(document).siblings() 6.子孙中查找 $(document).find('.i1') /*在子孙中查找class属性为i1的标签*/ 二.具体应用 实现点击菜单栏出现当前菜单下的内容,并隐藏其它菜单

【jquery】jquery筛选器规则

转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + checkBox_val + "_checkbox"; $('input[id*='+ac+']').each(function(){ $(this).attr("checked",true); }); 在Web应用程序中,大部分的客户端操作都是基于对象的操作,要操作

DOM编程 学习笔记（一）

PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的研究那些动态效果 的制作,实在是太炫酷了...先开始DOM的基本语法吧...等DOM和JQuery的基本语法和用法搞定后就去深入的研究 研究那些动态效果的制作... DOM编程 学习内容 1.DOM简单介绍 2.DOM解析方式 3.在网页中使用DOM编程 4.DOM window对象以及Loacti

JQuery筛选器的使用 (转)

jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象. 1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1"); ·* 匹配所有元素.例如:$("*") ·selecto

JQuery筛选器全系列介绍

1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大