JQuery+Bootstrap一揽子方案

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步骤：

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

<script type=”text/javascript”src=”./jquery-3.1.1.js”></script>

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

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

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

二、选择器

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

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

例如javascript之前使用的：

document.getElementById()

document.getElementsByTagName();

document.getElementsByName();

1. 基本

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

1.  $(‘#id属性值’);② $(‘.class属性值’);③ $(‘标签名称’); ④ $(‘*’);  通配符选择器，获得页面上全部的节点
2. ⑤ $(‘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两个节点并设置样式.

1. 层级

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’)

1. 并且选择器

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

并且选择器的具体使用

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

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

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

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

1. 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) 匹配节点的下标计数

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

1. 内容过滤选择器

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非空

1. 表单域选中

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

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

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

使用效果：

三．属性attribute操作

jquery对元素属性的相关操作

<input  type=”text” name=”username” id=”username” class=”apple” value=”xiaoming” >

以上红色部分都是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属性值操作

<div class=”apple”></div>

类似操作：

$().attr(‘class’);

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

$().removeAttr(‘c