基本选择器(*****)

id选择器

* 用法:$(“#id”)

类选择器

* 用法:$(“.类名”)

元素选择器

* 用法:$(“元素名称”)

通配符选择器

* 用法:$(“*”)

并列选择器

* 用法`:$(`“选择器,选择器,选择器”)

层级选择器：(主要为后代选择器和子元素选择器)

后代选择器 ：使用空格 所有后代包含孙子及以下的元素

子元素选择器：使用> 第一层的元素（儿子）

下一个元素 :使用+ 下一个同辈元素

兄弟元素 :使用~ 后面所有的同辈元素

属性选择器:

input[type='']

基本过滤选择器

eq(index):匹配一个给定索引值的元素,注意:这里没有引号

even :匹配所有索引值为偶数的元素，从 0 开始计数

odd :匹配所有索引值为奇数的元素，从 0 开始计数

表单选择器(认识就行)

:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

JQuery对属性的操作的方法

val();

§ 传入值表示赋值

§ 不传入值表示获取

attr();

§ 使用方法一：$(“”).attr(“src”);

§ 使用方法二：$(“”).attr(“src”,”test.jpg”);

§ 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});

removeAttr();

prop();新版本的方法.

§ 使用方法一：$(“”).prop(“src”);

§ 使用方法二：$(“”).prop(“src”,”test.jpg”);

§ 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});

JQuery中添加和移除样式

如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.

如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：

o addClass();

o removeClass();

prop和attr的区别

o prop:操作的是原始属性,非自定义

o attr:操作自定义属性

JQuery的DOM操作

常用的方法:

    * append(); ---在某个元素后添加内容.

    * appendTO(); ---将某个元素添加到另一个元素后.

    * remove(); ---将某个元素移除.

JQuery的遍历

常用: $(“”).each(function(index,element){ });

JQ的查找: find(); parent(); children();

BootStrap

BootStrap的概述:

是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成

BootStrap可以在那些地方使用:

BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.

BootStrap的使用:

       引入的文件:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

添加一个<meta>标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

BootStrap的全局CSS

布局容器：.container     类用于固定宽度并支持响应式布局的容器。

                      .container-fluid     类用于 100% 宽度，占据全部视口（viewport）的容器。

栅格系统:

                 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了                    易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

                 定义行:  .row

                 定义列：.col-lg-n .col-md-n  .col-sm-n   .col-xs-n

总结的很棒