JQuery+Bootstrap一揽子方案

来源：互联网发布：网络机房验收报告编辑：程序博客网时间：2024/06/08 16:39

JQuery1

一、介绍Jquery是对javascript封装的一个框架包

jquery可以通过非常简短、简洁的代码，实现与javascript相同的功能

Jquery的本质还是javascript，Javascript里边95以上的功能都有被jquery给封装好，例如对dom、事件、ajax等都有封装，如果是javascript是布料，那么jquery就是成品的衣服

2. 宗旨：写得更少，做得更多http://jquery.com 官方网址

3. 其他相关的javascript框架包

比较著名的有 Prototype、YUI、jQuery、mootools、Bindows、extjs以及国内的 JSVM 框架等

可以深入学习的有：YUI(yahoo user interface雅虎用户接口)、extjs

3.1 如何封装

function R(){return document.getElementById(id)} -->R(”biaoti”).style.color=”green”;

3.2 使用jquery

下载了两个形式的同一个版本的jquery：①压缩的生产版本、②未压缩的开发调试版本。使用3步骤：

把jquery文件放到应用目录， 2、在应用程序文件中对jquery进行引入：

3、Jquery具体的应用：${#biaoti}.css(‘color’,’blue’);//使用前需先加载页面，

注意：在应用程序文件中一定通过<script>标记对jquery进行引入：

未引入成功提示：Uncaught ReferenceError: $ is not defined(…)

二、选择器

什么是选择器：获得页面元素节点所使用的方法就是选择器

元素节点：<div> <p> <ul> <li>等等都是元素节点

例如javascript之前使用的：

document.getElementById()

document.getElementsByTagName();

document.getElementsByName();

基本

可以通过id属性、class属性、标签名称等方式获得页面元素节点

$(‘#id属性值’);② $(‘.class属性值’);③ $(‘标签名称’);④ $(‘*’); 通配符选择器，获得页面上全部的节点
⑤ $(‘s1,s2,s3..’); 联合选择器s:selector选择器意思

s1,s2,s3代表具体上边学习的 id、class、标签选择器之一

作用：把符合s1/s2/s3特点的节点都给获得到

以上①~⑤选择器的灵感来之css样式选择器

调用方法css()可以对元素的样式进行设置

css(样式名称,值);

样式名称：color background-color width height等等css样式名称

基本选择器具体使用：

$(‘#weather’).css(‘color’,’red’);

$(‘h2,.apple’).css(‘background-color’,’pink’);获得h2和class为apple两个节点并设置样式.

层级

2.1 $(‘s1 s2’)--父子关系

s: selector选择器，具体可以是 id、class、标签名称等选择器-例如：？$(‘div #one’) $(‘div span’)

$(‘s1 s2’):获得s1内部全部的s2节点，不用考虑级别,又称作“派生选择器”

2.2 $(‘s1 > s2’)--父子关系

$(‘s1 > s2’):获得s1内部的s2节点，且s1和s2必须是父子级关系，称作“直接子元素选择器” $(‘div > span’)

2.3 $(‘s1 + s2’)--兄弟关系

$(‘s1 + s2’): 获得s1后边紧紧挨着的第一个s2兄弟关系节点--应用：$(‘div + span’)

2.4 $(‘s1 ~ s2’)--兄弟关系

$(‘s1 ~ s2’): 获得s1后边所有s2兄弟关系节点--应用：$(‘div ~ span’)

并且选择器

要通过“并且选择器”获得制定的li出来

并且选择器的具体使用

:first :last //获得第一个或最后一个元素

:odd :even //获得下标(全部元素下标从0开始计数)为奇数、偶数的元素

:eq(下标) //equal等于下标-:gt(下标) //great than 比当前下标大-:lt(下标) //less than 比当前下标小 ,

$(‘:first’) 获得页面全部节点的第一个元素节点[不推荐直接使用]

3.1简单使用 $(‘li:first’).css(‘color’,’blue’);$(‘li:eq(4)’).css(‘color’,’red’)

3.2 高级使用

1)普通选择器的并且关系

并且选择器： :first :last :eq :gt :lt :odd :even

普通选择器(id class 标签名称等等)也可以构成是并且关系$(‘li:first’); -----> $(‘s1s2’);

$(‘s1s2s3s4..’); s1~s4共同限制获得的元素节点,元素节点必须同时满足s1~s4的全部条件

$(‘s1,s2,s3,s4’); 基本选择器里边有联合选择器,获得的节点只要符合s1~s4其中的一个条件即可

注意：并且选择器，各个小的选择器没有前后顺序要求，使用不要产生歧义

例如 $(‘:firstli’); 产生歧义 $(‘li:first’)没有歧义

2) 匹配节点的下标计数

多个选择器通过并且关系获得节点的时候，每个选择器应用的时候，都对已经获得节点的下标进行“归位(零)”处理---?

内容过滤选择器

4.1 :contains(text)---用法:匹配包含给定文本的元素

$(‘div:contains(banana)’); //获得div并且要求内部包含banana文本

<div>monkey like banana</div>

<div>dog like pear</div>
4.2 :empty用法: $(”td:empty”)匹配所有不包含子元素或者文本的空元素(元素内部没有空白、元素、文本)

$(‘div:empty’); //获得div元素并且要求是空元素

4.3 :has(selector)匹配含有选择器(selector)所匹配的元素的元素

$(‘div:has(span)’); //获得一个含有span标签元素的元素

4.4 :parent

用法: $(”td:parent”)匹配含有子元素或者文本的元素,即匹配其下非空元素

$(‘div:parent’); //获得div，并且div非空

表单域选中

复选框、单选按钮、下来列表都可以被选中

① 复选框、单选按钮-获得选中的表单域-:checked② 下拉列表:selected

表单域选中选择器使用：console.log($());

使用效果：

三．属性attribute操作

jquery对元素属性的相关操作

以上红色部分都是input框元素对象的属性

input、div、span、p、table等等html标签都是元素对象或元素节点

操作:$().attr(name);//获得name(属性名称的代表)属性

$().attr(name,value);//修改name属性值为value---$().removeAttr(name);//删除name属性

例1：$(‘input:first’).attr(‘name’);获得input元素节点的属性信息：

例2：$(‘input:first’).removeAttr(‘name’);

四．快捷操作

1. class属性值操作

类似操作：

$().attr(‘class’);

$().attr(‘class’,’pear’); //同一时刻只能设置一个值

$().removeAttr(‘class’); //直接删除class属性

class属性值的快捷操作：

$().addClass(); //给class属性添加属性值(可以同时设置多个值)

$().removeClass(); //删除class属性的具体属性值(可删其中的一个或多个，并保留其他的class属性值)

$().toggleClass(); //切换属性值，有则删除、没有就添加

例:1先在css提供class类：.apple{color:red}2然后在js中加入这个类$(‘div’).addClass(‘apple’);

相对应的attr()方法使用多次，后者会覆盖前者，而使用addClass()则累加而不覆盖。

css()

通过css()方法对元素节点的样式进行操作

具体使用：

$().css(name); //Jq中获取指定的css样式---document.getElementById().style.名称; //JS中获取操作

$().css(name,value);//Jq中设置css样式---document.getElementById().style.名称 = 值；//JS中设置操作

2.1 获取css样式

样式的设置有3种方式：① 行内<div style=’color:green’></div>②内部div{background-color:pink}

③外部<link href=”./14.css”rel=”stylesheet”type=”text/css”/>

2.2 Jquery设置css样式

① 样式统一设置为行内样式，② 如果存在同名的样式，分优先级显示(行内>>> 内部 >>>外部)

③ 在行内样式里边存在修改的样式，就直接修改，如果没有就添加一个新样式

④ 复合样式(border background margin padding等)可以直接设置

例:对div元素的css样式设置$(‘div’).css(‘width’,‘400px’);新样式直接添加，优先级高于内部样式

2.3 css()样式操作特点：

① 样式获取，jquery可以获取行内、内部、外部的样式。但dom方式只能获得行内样式

② 获取“复合属性样式” 需要拆分为"具体样式"才可以操作，(有的浏览器是可以获得复合属性信息的，

例如chrome)例如：background 需要拆分为 background-color background-image 等进行操作

样式会被设置为“行内样式”，有则修改，无则添加，(复合属性样式可直接进行设置，无需拆分为具体样式)

html()/text()

html()和text()都可以对标签包含的内容进行操作

<div>xxxxxxxxxxxxx</div>

具体使用：

$().html() //获得标签包含内容---$().html(yyyyy)//设置标签包含“参数”内容

$().text() //获得标签包含内容---$().text(zzzzz) //设置标签包含“参数”内容

html() 可以获取文本和html标签内容，例如可以用html()直接设置链接

text()方法只能获得文本内容(过滤html标签)

通过html()方法对div包含的内容进行修改设置：

$(‘div’).html(“欢迎访问<a href=’http://www.whereit.cn’>传智</a>播客官网”);

结论：html()方法可以同时针对文本和html标签进行设置，并且设置好的html标签可以被浏览器解析使用

4.val()

该val的全拼是value，可以对元素标签的value属性值进行操作，大多数情况是用在form的表单域设置

类似操作有：$().attr(‘value’);---$().attr(‘value’,xxx);

attr()和val()方法在某些方面操作的结果完全一致

val()方法具体使用：$().val();//获得元素节点的value属性值--$().val(值);//设置元素节点的value属性值

4.1 下拉列表

① 获得选中项目的value值

注意：上图的第一种获得选中项目的value值，一定要找到select框节点(例如 $(‘#xueli’).val());

设置哪个项目选中,给下拉列表设置具体哪个项目应该选中

$(下拉列表选择器).val([被选中项目的value值]); //val()内部是一个数组参数

例如$(‘#xueli’).val([3]); //就会使得“高中”项目选中

4.2 单选框/复选框

① 获得选中项目的value值 console.log($(‘.sex:checked’).val());

设置哪个项目选中$(全部的下拉列表).val([被选中项目的value值]); //通过“数组”参数进行设置

虽然每次只能使得一个单选按钮选中，但是val内部也需要通过数组设置参数

<input type=”radio”class=”sex”value=”男”>男---function(){$(.sex).val([‘男’]);}结果选中男

五．jquery对象和dom对象

JQuery2

一．jquery对象和dom对象关系

dom对象：

① document.getElementById();

② document.getElementsByTagName();

③ document.getElementsByName();

以上三个表达式创建出来的内容就是dom对象

其中②、③表达式创建的内容是集合/数组内容，要通过[下标]方式给转为具体dom对象

dom对象可以调用如下方法或属性：dom对象.innerHTML;---dom对象.getAttribute();---dom对象.childNodes;……

jquery对象：通过各种选择器(id class tag标签层次内容过滤等等)创建出来的内容就是jquery对象

例如：$(#id) $(.class) $(tag标签)等等内容都是jquery对象

jquery对象可以调用的方法或属性：jquery对象.css();-- jquery对象.html();-- jquery对象.text();-- jquery对象.val();

jquery是对javascript封装的一个框架包

给我们直观感觉 $(#id) 就是对dom对象 document.getElemntById()等封装

$(tag标签) 就是对dom对象document.getElementsByTagName()的封装

它们的具体关系为：

jquery对象可以变为dom对象： $(选择器)[下标]

dom对象可以变为jquery对象： $(dom对象)

dom对象具体展示： console.log(document.getElementById('biaoti'));

//<h2 id="biaoti">jquery对象和dom对象关系</h2>

jquery对象展示： console.log($('#biaoti'));//[h2#biaoti]，jquery对象里边包含了dom对象：

jquery对象和dom对象的成员不能直接调用：

jquery对象变dom对象--console.log($('#biaoti')[0]);--<h2 id="biaoti">jquery对象和dom对象关系</h2>

dom对象变jquery对象--console.log($(document.getElementById('biaoti'))); -[h2#biaoti]

jquery对象和dom对象转换完毕，就可以调用对方的成员：

$('#biaoti')[0].style.color = "red";//jquery对象变为dom对象，进而调用dom的成员

$(document.getElementById('biaoti')).css('background-color','lightblue'); //dom对象变为jquery对象，进而调用jquery对象的成员

如果有的jquery对象包括多个dom对象如：<ul><li></li><li></li><li></li><li></li></ul>,$(‘li’)[0/1/2];

注意：只有具体的一个dom对象，可以变为jquery对象

二．加载事件

js的加载事件： window.onload = 函数;

javascript在执行的时候，需要html代码的支持，因此需要先让html代码执行，js代码后执行，如何保证js代码后执行呢，就需要通过加载事件

jquery对加载事件的封装：① $(document).ready(function(){});② $().ready(function(){});③ $(function(){});其中③是对①和②的封装

例：$(function(){ $('#biaoti').css('border','2px solid green'); });//可用三种加载事件

2.jquery加载事件与js的不同

js的加载事件： window.onload = 函数;

具体不同：① 使用个数不同--在同一个请求中，jquery的加载事件可以同时设置多个，js中只能设置一个(多次设置后者覆盖前者)

② 执行时机不同，jquery的加载事件执行时机更靠前，传统onload加载事件，全部内容在浏览器中显示出来才执行，jquery加载事件是全部内容在电脑内存中绘制完毕就要执行

3. jquery加载事件原理(了解)

jquery加载事件并不是对onload事件的封装，而是对DOMContentLoaded事件的封装

利用DOMContentLoaded，模拟jquery加载事件document.addEventListener(‘DOMContentLoaded’,function(){alert(6789)});

三．普通事件

jquery中如何封装普通事件的触发使用

具体的普通事件有: onclick onmouseover onmouseout onkeyup onkeydown onfocus onblur等

js中事件:1 <input type=”text” onclick=”函数名称()”>,2dom对象(input的).onclick=函数名称;

jquery中事件设置：$().click(function(){事件触发过程});$().blur(function(){事件触发过程});

在事件的触发过程中，可以使用this关键字，其代表触发该事件的dom对象

$().click(function(){this});// this关键字代表当前事件执行者对应的dom对象

事件设置的时候，也可以不加参数(了解)例如：$().click(); $().blur()

$(function(){$('h2').click(function(){console.log(this);

$(this).css('background-color','pink'); }); });

四．动画效果

1.简单动画

$().show([参数,函数]);显示元素-参数：动画执行的时间，单位是毫秒值--例：$('div').hide(3000);

$().hide([参数,函数]);隐藏元素-函数：动画执行完毕后，该函数会被自动调用，因此也称该函数为回调函数

$().toggle(); 切换显示状态，可以多次使用，切换显示状态会判断，如果显示就隐藏，如果隐藏就显示

参数和函数可以不设置，那么该动画效果执行的速度非常快

hide()和show()方法-本质就是设置css样式display:none/display:block

带回调函数的使用：

2.垂直动画

垂直动画：沿着垂直的方向是的元素隐藏/显示的效果,以顶部为基准

$().slideDown([参数，函数]);显示display:block----->height变大

$().slideUp([参数，函数]); 隐藏height变小----->display:none//$('div').slideUp(4000);

$().slideToggle(时间参数); 可以多次执行，切换隐藏、显示效果

参数和函数可以不设置，那么该动画效果执行会保持一个默认速度--- $('div').slideUp()

3.颜色渐变动画

通过元素透明度的变化实现隐藏、显示效果，函数不设置，动画效果默认速度执行。

$().fadeOut([参数，函数]) 隐藏opacity变小----->display:none

$().fadeIn([参数，函数]) 显示display：block---->opacity变大

$().fadeToggle([参数，函数]) 切换

$().fadeTo(时间,透明度(0-1),函数)//可设置元素透明度

例：$(function(){$('#two').fadeTo(3000,0.4);});

五.each遍历方法

遍历：沿着某一个顺序，对数组中的元素做一次且仅做一次方法

1. each遍历方法使用

$(多个dom对象).each(function(参数1，参数2){});//就是要对每个dom对象都进行一次访问

参数1：代表每个dom对象的下标，从0开始，参数2：代表被遍历的每个”dom对象”

给each方法中的每个dom对象分别设置css样式：

$('li').each(function(i,v){ $(v).css('background-color','pink');});

六．jquery插件

什么是jquery插件

jquery在使用的过程中，可以调用许多方法，例如css() addClass() removeClass() html() text() val() each()等等,但是方法的数量终归是有限制的，其不能无限任意满足我们对各种方法的需求，那么我们根据实际需求，灵活地在jquery的基础之上增加一些方法的过程，就是jquery插件的开发。

增加方法：$.fn.方法名称 = 值(函数);//被增加的方法要在使用之前就设置好

给jquery增加一个setmystyle()方法，是的对象调用可以设置颜色和背景色效果：

$.fn.setmystyle = function(){ $('h2').css('color','blue'); }

</script>

3. 成熟插件

在自己应用中使用时间选取器插件

在jquery中,$符号和jQuery符号互为别名，可以交叉使用

时间选取器插件的应用效果：

$(function(){$('#mytime').datepicker();});

</script>

<body> <h2>jquery插件--时间选取器</h2> <input type="text" id="mytime" /></body>

使用注意：1 jquery版本是否支持使用，2 先引入jquery文件,再引入插件文件(如下图)

jquery插件使用对jquery版本匹配要求高，因此插件的使用，需要查看当前的jquery是否支持使用

成熟插件使用步骤：① 引入jquery插件文件② 引入对应的css样式文件③ 引入辅助的js文件(例如语言包)④ 引入需要的图片文件

七．属性选择器

基本、层次、并且、内容过滤、表单域选中等选择器

属性选择器：通过属性也可以找到页面上的元素节点

具体的使用：

1.[name] 节点必须有name属性，2.[name*=value]包含---$('[value*=c]').css('color','red');

3.[name=value] 节点有name属性，并且值为value，4.[name^=value]开头，5.[name$=value]结尾

7.[name!=value] ①节点有name属性，并且值不等于value② 节点没有name属性

8.[][][][] 并且关系的选择器可以融合多种选择器： $(基本层次并且内容过滤表单域选中属性)

节点要求同时满足多个条件，例如：$(‘li:gt(2):lt(4)’) 要求li节点同时满足三个选择器

例： $('[value][value!=xiaoming]').css('font-size','40px');

//要求节点有"value属性" 并且 "属性值不等于xiaoming"

Bootstrap

基于html css javascript的超强的前端框架

特点：Bootstrap是一移动设备为优先，适用pc机平板手机

Bootstrap的环境------http://v3.bootcss.com/网站

//cdn.bootcss.com/jquery/1.11.3/jquery.min.js通过该网址来下载jquery文件

引入bootstrap环境的方法一：直接粘贴

1文档要求必须是 html5，以移动设置为优先

引入bootstrap环境的方法二

<title>引入bootstrap</title>

bootstrap布局容器

排版的标签

h1……h6 36px 30 24 18 14 12

.page-header 设置页头，给标题加一个分割线

<small></small>，<big></big>，<strong></strong>，<em></em>，<del></del>删除线

文本对齐方式---.text-left，.text-center，.text-right 右对齐

英文大写写---.text-uppercase 大写，.text-lowercase 小写，. text-capitalize首字母大写

列表

.list-unstyled去掉列表前面的符号，和去掉原有的格式，.list-inline 把<li></li>之间的内容，变成横向排列

自定义列表---.dl-horizontal 设置变成横向排列

表格

.table 表格的一个基类，如果加其他的样式，都在.tabel的基础上

<div class="table-responsive;">---. table-responsive给table的父元素加，移动设备优先，内容不能完全显示出现滚动条

<tr class="active">---.active, .success, .info, .warning, .danger

响应式图片：.img-responsive响应式图片

图片的形状---.img-circle椭圆形， .img-rounded 圆角矩形， .img-thumbnail圆角的边框

例：<img src="images/01.jpg" class="img-responsive img-rounded img-thumbnail"/>.img-circle------.img-responsive响应式图片

栅格系统：栅格系统一定要放入容器中<div class=”container”></div>，<div class=”container-fluid”></div>

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

例：<div class="container" style="background:#ffffff;">

</div></div>---(col-md-6其中6表示将屏幕一分为12/6=2份，即每列占6格的空间)

如果想做成响应式效果，使用栅格系统参数

小于768px 手机端 Col-xs-, 大于768 小于992 平板 Col-sm-

大于992 小于1200 Col-md-, 大于1200 Col-lg-

例：<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><img src="images/01.jpg" class="img-responsive"/></div>

偏移offset（只能向右偏移）---语法:Col-Col-xs/sm/md/lg-offset-数值（如果超出12会另起一行重新计算格子）

例：<div class="col-md-2 Col-md-offset-5"></div> pc中等屏幕向右偏移5个列

排序（了解）语法：col-xs/sm/md/lg-pull 向左偏移,Col-xs/sm/md/lg-push 向右偏移

辅助样式

情境文本颜色---.text-muted(柔和) .text-success .text-info .text-primary .text-warning .text-danger

背景文本颜色--- .bg-success .bg-info .bg-primary .bg-waring .bg-danger

下拉三角<span class=”caret”></span>

快速浮动 pull-left 左浮动 pull-right 右浮动

清除浮动 .clearfix给父盒子加就相当----<div style=”clear:both”></div>

表单 .form-control 给输入框加<input><textarea></textarea>

.form-group 给输入框的父元素加 ,给外面包含的盒子加<div class=”form-group”>

.checkbox-inline 给label 标签加给包含<input >和内容加样式

.radio-inline 给label 标签加，给<input >和内容加样式

输入框组

.input-group-addon给给组合的内容加

.input-group 给父元素加

表单行内显示---给表单加 .form-inline

.form-horizontal给表单加<form>变成响应式效果 ---必须结合栅格系统

注意：输入框不能使用栅格系统，给<div ><span>…给这类的标签加

按钮

可以加按钮效果的有哪些标签

.btn是按钮样式的基类

按钮样式 .btn-primary .btn-default .btn-success .btn-warning .btn-danger

按钮的大小 .btn-lg（最大的） .btn-sm .btn-xs（最小的）默认的就是.btn-md

按钮组给父元素加 .btn-group

下拉菜单.dropdown-menu 给下拉列表中的内容给ul加样式

.dropdown 包含触发的按钮和下拉列表加样式 ---父元素

.Data-toggle 按钮的触发器，点谁给谁加

.dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 右对齐

.divider 给<li>加<li></li>之间没有内容

标签页

.nav是标签页的一个基类 ---给ul加

.nav-tabs 普通标签页

.nav-pills 胶囊式标签页

.nav-stacked垂直排列

.active 给<li>加默认显示的是哪个标签页内容

阅读全文

0 0