开始写之前先复习一下元素和节点的区别： 元素是W3C文档对象模型（DOM）当中使用最广泛的节点之一。 元素拥有关联的“属性”。 XmlElement类拥有许多方法来访问它的“属性”（GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等）。 你也可以使用“Attributes”属性来返回一个支持“名字”或者“序号”访问的“XML属性集”。 那么，从XmlElement类的解释来看，我们很容易就知道XmlNode和XmlElement类的区别了：...
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB。 代码如下:var $=(function(){var b=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\"])?(?:\\\1|.)+?\1\])?|\*|>/ig,g=/^(?:[\w\-_]+)?\.([\w\-_]+)/,f=/^(?:[\w\-_]+)?#([\w\-_]+)/,j=/^([\w\*\-_]+)/,h=[null,null];function d(o,m){m=m||document;var...
尽管js可以想面向对象那样去构造对象，隐藏私有方法，但需求变化的往往比你写程序还要快时，就连设计js对象的时间也没有了，所以我比较倾向于用js私有函数和js方法；jquery私有函数和jquery对外暴露方法的形式也可以实现，而页面生成的html结构则完全在js中生成，包括哪些id和class， 这样可以最大限度的确保统一和重用的方便性，但也有个缺点，就是在重用时，如果需要样式发生变化（结构是死的不能变化），就需要用div将原来的结构...
效果如图所示:核心代码: 代码如下:<script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所有div的属性 $('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改变所有div下的span元素的属性 $('#two >.mini').css("background","red");//id为two的div内的所有class为mini的元...
标题1 标题2 标题3 标题4 标题5 标题6 进入之后才能看到效果！ $(document).ready(function () { myHide(); }); function myHide() { //alert("hello"); //注册事件 $(".m1").bind('mouseover', m1_mouseover); $(".m1").bind('mouseout', m1_mouseout); $(".m2").bind('mouseover', m2_mouseover); $(".m2").bind('mouseout', m2_mouseout); $(".m3").bind('mouseover', m3_mouseover); $(".m3").bind('mouseout'...
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二：nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。 (EG) li:nth-child(3n){background:orange;...
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。 这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。 笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。 序号 选择器 含义1. * 通用元素选择器，匹配任何元素2. E 标签选择器...
1：标签选择器 标签选择器，是所有带有某种标签的都生效。这里以p为例，也就是所有的带有p标记的都会这样的样式 代码如下:<html><head><styletype="text/css">p{font:"宋体"; color:#FF0000}</style></head><body><pid="p1">我现在表现的是标签选择器</p><pid="p2">我也用的是标签选择器</p><h1>我没有被任何的选择器修饰</h1></body></html> 2：id选择器，注意id选择器是唯一的，因为只有id="yy"的才有这种样式，而一个页面里元素...
今天为大家介绍一下HTML5的相关知识，今儿主要以新增的选择器为主题，为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery和JavaScript两种写法对比的方式为大家分享。希望能为大家在学习HTML5的道路上有所帮助。 querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。小例子如下： 1)获取标签 JavaScript代码var body = document.querySelector(bod...
之前，我们介绍了HTML5中的选择器querySelector()。今天，我们继续为大家分享HTML5中新添加的选择器querySelectorAll()。 querySelectorAll()方法接收的参数也是CSS选择符，但是返回的是所有匹配元素，而querySelector()方法返回的是第一个匹配的元素。 querySelectorAll()方法返回的是一个NodeList的实例。NodeList是带有所有属性和方法的实例。其底层实现相当于一组元素的快照，并不是文档进行搜索的动态查询。这样可以避免...
HTML5中的querySelector()方法和querySelectorAll()方法都在前几篇中为大家介绍过了，不知道大家了解得怎么样了呢?在这里复习一下，querySelector()方法是返回与传递的CSS选择符相匹配的第一个元素;querySelectorAll()方法是返回与传递的CSS选择符相匹配的所有元素，是一个NodeList对象。简单的回顾之后，我来分享一下新一个方法——getElementsByClassName()方法。 随着HTML4在Web开发领域得到了很多应用之后，导致了HTML4有了...
选择器 p[name^=“my”]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以“my”开头的元素标签 p[name$=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以“my”结尾的元素标签 p[name*=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含“my”结尾的元素上 选择器 > 、 + 、~ 选择器>表示受影响的元素是第一个元素的子元素。 选择器+这 个选择器引用紧跟元素之后的元素...
这次给大家科普一下css中id选择器的命名规则有哪些，给CSS中ID选择器命名的时候有哪些注意事项，下面就是总结，一起来看一下。大小写敏感只能包含[a-zA-Z0-9]、-,，其中不能以、-、0-9开头在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。同时应该注意的是，虽然在HTML4.01及以前的版本不严谨，但在XHTML中，CSS中的命名是区分大小写。1.首先说说语义性所谓语义性...
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额...
一、CSS3新增选择器1、nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0;10 }11 .box p,.main p{12 background:red;13 color:#fff;14 margin-top...