css选择器

目录 JQuery介绍 JQuery优势 JQuery版本 JQuery对象 声明JQuery对象的语法 JQuery基本的语法 JQuery把文件导入模板中 查找标签 基本选择器 层级选择器 筛选器 基本筛选器 属性筛选器 表单筛选器 操作标签 样式操作 文本操作 文档处理 属性操作 克隆 位置操作 事件 事件的绑定 input监听默认的事件 阻止事件冒泡 JQuery介绍 JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。 JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情 JQuery优势 一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。 丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作

:last-child----represents the last element among a group of sibling elements. CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。 举个例 子： 从代码和图可以看出:last-child选择了最后一个li标签。 同时，我们换另外一段代码，看看是否还有这样的效果。 从代码和图可以看出，:last-child并没有起到我们想要的作用。如果，这个时候去掉最后的div标签，再看看效果。 这时，效果出来了，那么，可以总结了。 :last-child表示其 父元素的最后一个子元素，且这个元素是css指定的元素 ，才可以生效。 注意： :last-child 这里父元素的子元素一定是css指定元素才生效 :last-of-type 关于:last-of-type手册中是这么解释的： The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。 直接用上面两个栗子。 没有干扰元素，OK。 有干扰元素，OK。 :last-of

CSS 预处理器 Stylus分享 ps:为了分享，内容东拼西凑，并非原创，很多参考了 张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接： https://github.com/leeseean/stylus-style-guide github stylus语法规范 http://blog.hooperui.com/561-2/ 预处理器的作用ect 写的很好。。 一、简介 由于原生css有一些缺陷， 一些CSS预处理器应运而生 使用最多的是 变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。 复用，逻辑能力和抽象能力。 Stylus 相较于SASS更加简洁，甚至冒号也都可以省略，初学Stylus时感到它太神奇了，仅仅以空格分隔属性名和多个属性值就可以生成想要的CSS， 而且还可以拼接字符串等等 。与此同时，类似Ruby或Python完善的缩进语法，Stylus在简约自由中有效的防止了语法歧义。 安装 npm install stylus --save 例子 Stylus由Javascript编译，其结构语句也和Javascript相差不多。Stylus较之LESS则要优越不少，不仅仅是可定义变量，如Javascript般的条件语句和循环语句也为Stylus带来各种可能，加上丰富的内置函数

目录 BOM与DOM window对象 navigator对象（了解即可） screen对象（了解即可） history对象（了解即可） location对象 弹出框 计时相关 DOM对象 DOM结构 查找标签 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点： 替换节点： 属性节点 获取值操作 class的操作 指定CSS操作 事件 常用事件 绑定方式 jQuery 介绍 优势 版本 基础语法 使用 jQuery对象 查找标签 基本选择器 层级选择器： 基本筛选器： 属性选择器： 表单筛选器 ： BOM与DOM BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 window对象 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 window对象方法 方法 说明 open()、close() 打开窗口、关闭窗口 resizeBy()、resizeTo()

html标签是由 <> 包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的，叫单标签， 页面中所有的内容，都是要放在HTML标签中的 HTML标签分三部分： 标签名称 标签内容 标签属性 HTML标签具有语义化 语义化就是仅通过标签名就能判断出该标签的内容 语义化的作用： 网页结构层次更清晰 更加容易被搜索出来 更加让屏幕阅读器读出该页面的内容 标签的内容就是在一对标签内部的内容 标签的内容可以是其他标签 标签元素全局标准属性 class属性：用于定义元素的类名 id属性：用于指定元素的唯一id style属性：用于指定元素的行内样式 title属性：用于指定元素的额外信息 accesskey属性： 用于指定激活元素的快捷键 tabindex属性：用于指定元素在tab键下的次序 dir属性：用于指定元素中内容的文本方向 属性值为ltr 或 rtl，left to right 和 right to left leng属性： 用于指定元素内容的语言。 全局事件属性 onload:在页面加载结束之后触发 onunload：在用户从页面离开时发生，如点击跳转，页面重载，关闭浏览器窗口等。 form表单事件 onblur:当元素失去焦点时触发 onchange:在元素的元素值被改变时触发 onfocus:当元素获得焦点时触发 onreset:当表单中的重置按钮被点击时

目录 jQuery介绍 jQuery的优势 jQuery内容 jQuery对象 jQuery基础语法结构 jQuery 使用注意事项 查找标签 基本选择器 层级选择器 jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件

01. BOM & DOM 1.BOM Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话 window对象 所有浏览器都支持window对象，它表示浏览器窗口。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。 所有javascript全局对象，函数以及变量均自动成为window对象的成员 全局变量时window对象的属性，全局函数是window对象的属性之一 HTML DOW 的 document 也是window对象的属性之一 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新的窗口 window.close() - 关闭当前窗口 window的子对象 navigator 对象 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息 navigator.appName // web浏览器全称 navigator.appVersion // web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端和绝大部份信息 navigator

目录 Bom（Browser Object Model） window对象 navigator对象 screen对象 history对象 location对象 弹出框 计时相关 setInteval clearInrerval() DOM（Document Object Model） 直接查找 间接查找 节点操作 添加节点 删除节点 替换节点 属性节点 attribute操作 class的操作 指定css操作 常用事件 绑定方式 jQuer基础语法 基本选择器 id选择器 标签选择器 class选择器 配合使用 组合选择器 Bom（Browser Object Model） 是指游览器对象模型，他使JavaScript有能力与游览器进行对话 window对象 所有游览器都支持window对象。他表示游览器窗口 一些常用的window方法： window.inneHeight：游览器窗口内部高度 window.innerWidth：游览器窗口的内部宽度 window.open()：打开新窗口 window.close()：关闭当前窗口 navigator对象 游览器对象，通过这个对象可以判断用户所使用的游览器，包含了游览器选相关信息 screen对象 屏幕对象，不常用 history对象 window.history对象包含游览器的历史 览历史对象，包含了用户对当前页面的浏览历史

46 BOM JQuery开头 01. BOM & DOM 1.BOM Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话 window对象 所有浏览器都支持window对象，它表示浏览器窗口。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。 所有javascript全局对象，函数以及变量均自动成为window对象的成员 全局变量时window对象的属性，全局函数是window对象的属性之一 HTML DOW 的 document 也是window对象的属性之一 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新的窗口 window.close() - 关闭当前窗口 window的子对象 navigator 对象 浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息 navigator.appName // web浏览器全称 navigator.appVersion // web浏览器厂商和版本的详细字符串 navigator.userAgent //

CSS3的新特性 新增CSS3特性有兼容性问题，ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性切属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头的E元素 E[att$="val"] 匹配具有att属性且值以val结尾的E元素 E[att*="val"] 匹配具有att属性且值中含有val的E元素 【注意】类选择器、属性选择器、伪类选择器，权重为10 结构伪类选择器 选择符 简介 E:first-child 匹配父元素中元素的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E：nth-child（n） 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E：nth-of-type（n） 指定类型E的第n个 nth-child（n）选择某个父元素的一个或多个特定的子元素 n可以是数字，关键字和公式 n如果是数字，就是选择第n个子元素，里面数字从1开始 n可以是关键字：even偶数，odd奇数 n可以是公式