css选择器

移动端性能优化（CSS性能优化）

阅读更多关于移动端性能优化（CSS性能优化）

CSS性能优化 CSS选择器优化如果可以直接选中元素，不需要加一些多余的修饰 /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/ div#slider.slider { } 一般来说，class用于样式，id用于js，因为id定义的样式不利于复用保证不会误选的情况下，尽量保持简单避免冲突可以在命名时区分好 /*保持简单，不要使用嵌套过多过于复杂的选择器*/ /*浏览器从右向左解析CSS*/ /*.slider .slider-item-container .slider-item .slider-link .slider-img { width: 100%; }*/ .alex-slider-img { /*嵌套少*/ /*权重低便于使用的时候覆盖*/ width: 100%; } 尽量少用通配符选择器，可以单独写出来，罗列出来 /*避免通配选择器*/ * { } ul, li, dl, dt, dd, p { padding: 0; margin: 0; } 不必要的样式和没有用到的样式直接删除即可 /*移除无匹配的样式*/ .slider { /*width: 100%;*/ } 高级选择器少用（类似正则的），还有属性选择器，性能并不高但是必须的情况下可少量使用 /*避免类正则的属性选择器*/ [class*="slider

6个强大的CSS选择器

阅读更多关于 6个强大的CSS选择器

1. div >a 这个选择器将使我们能够选择所有父元素是div标签的元素。  <div> <a></a> </div>  <p> <a></a> </p> 2. div +a 选择紧接在div元素之后的每个标签。如果我们在div和a标签之间有一个元素，则不会选择该元素。 <main>  <div></div> <a></a>  <div></div> <p></p> <a></a> </main> 3. div ~a a标签将选择每个标签，然后在同一级别上添加div标签。换句话说，如果a标签不是紧跟在div标签之后，而是具有div标签作为同级元素，则将选择该标签。 <main>  <div></div> <a></a>  <div></div> <p></p> <a></a> <section>  <div>

高级选择器querySelector和querySelectorAll

阅读更多关于高级选择器querySelector和querySelectorAll

/*--> */ /*--> */ Javascript新提供的querySelector和querySelectorAll方法，是仿照CSS选择器功能编写的 querySelector 功能：该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素，如例： <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div> <p>第一层</p> </div> <script type="text/javascript"> var P = document.querySelector('p'); //结果：<p>第三层</p> </script> querySelectorAll 功能：该方法返回所有满足条件的元素，结果是节点集合，查找规则与querySelector方法一样，如例： <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div> <p>第一层</p> </div> <script type="text/javascript"> var P = document.querySelectorAll('p'); //选中顺序：<p>第三层</p> <p>第二层</p> <p>第一层</p> </script>

jQuery基础知识笔记（一）

阅读更多关于 jQuery基础知识笔记（一）

jQuery官网： https://jquery.com/ 在线API: https://api.jquery.com/ jQuery UI： https://jqueryui.com/ API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码高版本的jQuery不支持IE浏览器，注意匹配 1. 框架库和jQuery介绍 jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JS实现的，所以并不是代替JS。可以说jQuery本身就是一堆JS函数，jQuery就是一个JS的函数库 2. jQuery文件使用（1）为什么要学习jQuery？ DOM中一个简单的功能需要大量的代码；兼容问题很多；代码容错性很差；window.onload也只能有一个（2）jQuery好处：解决浏览器兼容性问题，体积小，链式编程，隐式迭代，插件丰富，开源，免费（例题）点击按钮出现一个蓝色小方块 < script > //Dom中写法 window . onload = function ( ) { document . getElementById ( "btn" ) . onclick = function ( ) { var divObj = document . getElementById ( "dv" ) ; divObj . style .

jQuery学习——入门jQuery选择器之层次选择器

阅读更多关于 jQuery学习——入门jQuery选择器之层次选择器

今天说的是层次选择器，那层次选择器有哪几个？ $("ancestor descendant")：选取parent元素后所有的child元素 $("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了 $("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $("prev ~ siblings"):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器这里要说下，由于最后2个用的比较少，一般会用其他选择器替代，请看下面： $("prev + next")等价于next() $("prev ~ siblings")等价于nextAll() 具体用法会在后面说到。 =========================================================================== 下面我们来仔细说说这4个层次选择器【1】 $("ancestor descendant")：选取parent元素后所有的child元素 ancestor的中文意思是“祖先”，descendant的中文意思是“后代”，就像css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级，后者子级，以此类推

04-CSS选择器（复合选择器）

阅读更多关于 04-CSS选择器（复合选择器）

复合选择器交集选择器并集选择器后代选择器子元素选择器属性选择器伪元素选择器（CSS3) CSS书写规范空格规范选择器规范属性规范复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如：h3.special。交集选择器是并且的意思(即…又…)，比如： p.one 选择的是类名为one的p标签。用的相对来说比较少，不太建议使用。 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < style > p.red { color : red ; } </ style > </ head > < body > < p > 这里是一段文本，样式没有设置 </ p > < p class = " red " > 这里是一段文本，字体是红色 </ p > </ body

阅读更多关于 CSS选择器

1、属性选择器： 1）E[attr]：只使用属性名，但没有确定任何属性值 2）E[attr=“value”]：指定属性名，并指定了该属性的属性值 3）E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的 4）E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的 5）E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的 6）E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value 7）E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con） 2、伪类选择器 1）结构性伪类选择器 X:first-child 匹配子集的第一个元素。IE7就可以支持 X:last-child 匹配父元素中最后一个X元素 X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始 X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。 (唯一的一个子元素) X:nth-last-child(n) 从最后一个开始算索引。

Web前端JQuery面试题（一）

阅读更多关于 Web前端JQuery面试题（一）

Web前端JQuery面试题（一）一：选择器基本选择器什么是 #id ， element ， .class ， * ， selector1, selector2, selectorN ？答：根据给定的 id 匹配一个元素，用于搜索，通过 id 的属性给定值。案例：查找 id 为 da3 的元素 html代码： <div id="da1"></div> <div id="da2"></div> <div id="da3"></div> jquery代码： $("#da3"); 结果： [ <div id="da3"></div> ] html代码： <div id="da:q"></div> jquery代码： $("#da\\:q"); 根据给定的元素名匹配所有元素案例，查找 div 元素： html代码： <div> da1 </div> <div> da2 </div> <p>da3</p> jquery代码： $("div"); 结果： [ <div> da1 </div> , <div> da2 </div> ] 根据给定的类匹配元素 html代码： <div class="dashu"> dashu </div> <div class="da"> da </div> jquery代码: $(".da"); 结果: [ <div class="da"> da

前端基础之jQuery入门 01

阅读更多关于前端基础之jQuery入门 01

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more." 优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。4

jQuery 入门

阅读更多关于 jQuery 入门

不能正常引用jQuery-2.2.4.min.js所以代码没生效 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 官网: 点击中文文档: 点击书写规范 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> //代码不能写在引用文件这个容器里 <script> $somecode //$符号就表示jQuery jQuery.somecode //等同 </script> PS:由于编辑器的JS编码问题中文在js编码过程中没有使用utf-8.显示乱码.实际代码和注释源码有区别选择器和筛选器类似JS有#id(id选择器),element(元素选择器即标签),class(class选择器),组合选择器(selector多种选择器组合),层级选择器,*(选择全部)... 基本选择器在js基础上稍微修改了一下,是用#代表id, .class代表class,标签直接使用标签名 PS:id选择器,使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文本部分，

订阅 css选择器