初始JQuery01

常见的JavaScript框架库

为什么使用JavaScript框架库？

普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库

jQuery:

• jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆JavaScript函数。
• jQuery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和jQuery结合也是最方便，jQuery的扩展插件也是非常多

jQuery简介

什么是jQuery？

jQuery就是一个JavaScript函数库

jQuery能做什么？jQuery是做什么的？

jQuery本身就是一堆JavaScript函数，JavaScript是做什么的，jQuery也一样。毕竟jQuery只是用JavaScript编写的函数库而已，有些功能jQuery没有封装，则还需要通过自己写JavaScript来实现。

jQuery中的顶级对象$

$jQuery中最常用的对象即对象，要想使用jQuery的方法必须通过对象。只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。

$是jQuery简写，在代码中可以使用jQuery代替，但一般为了方便大家都直接使用。

jquery里面的几个函数

1. $.map(array,callback(element,index));element 为元素 ，index 为遍历的索引

   一个数组中的元素转换到另一个数组中。

   作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

 var arr = [1, 2, 3, 4, 5, 6];
     $.map(arr,
     function() {
         console.log(arguments[0] * 2);
     });
     
var data = { "luox78": "shuai", "age": 18 };
 $.map(data,
     function () {
         console.log(arguments[0]);
     });

return false 演示

$.map(arr,
        function() {
            if (arguments[1] > 3)
                return false;
            console.log(arguments[0]);
        });
 //1, 2, 3, 4

1. each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

jQuery.each(object, [callback])

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

1. jQuery.trim(str)

   去掉字符串起始和结尾的空格。

   jQuery 代码:

   $.trim("  hello, how are you?  ");

   结果:

   "hello, how are you?"

JQuery选择器

js dom 转换成JQuery对象

var div = document.getElementById("div");
$(div).css("backgroundColor", "black");

JQuery转换成dom对象

$(div).get[0];//$(div)[0];

问题

Array（数组）对象有没有对应的jQuery对象？

数组本身就不是Dom对象。不存在与jQuery对象之间的转换。使用jQuery语句可以直接使用数组，就像jquery.each()或jquery.map()

链式编程

什么是 链式编程

$("#btn").click(function()).css(XXX).text();

说明

Jquery对象中的方法，一般带参数的返回jquery对象本身，不带参数的返回要的值，使用带参数的方法就实现了所谓的 链式编程，注意：返回的jquery对象有可能是一个集合

selector

常见的

$('#id')、Id选择器
$('span')、标签选择器
$('.cls')，类选择器
$('*[name=gender]')或$('[name=gender]')，属性过滤选择器：
$('div.cls') 标签类选择器

多条件选择器

$(“p,div,span.menuitem”)，同时选择p标签、div标签和拥有menuitem样式的span标签元素

层次选择器

1. 后代，$(“div li”)获取div下的所有li元素（后代，子、子的子……）
2. 子元素，$(“div > li”)获取div下的直接li子元素 【必须是直接子元素】
3. 相邻元素1：jquery(“.menuitem + div”)获取样式名为menuitem之后的相邻的（紧接着的）第一个div元素（不常用）等同于jquery(‘.menuitem’).next(‘div’);如果相邻的那个元素不是div,则不会继续向后找。
4. 相邻元素2：jquery(“.menuitem ~ div”)获取样式名为menuitem之后所有的兄弟div元素，等同于jquery(‘. menuitem ’).nextAll(‘div’)。【nextAll(‘*’)或nextAll()表示后面的所有元素。】

获得兄弟元素的几个方法

• next();//当前元素之后的紧邻着的第一个兄弟元素（下一个）
• nextAll();//当前元素之后的所有兄弟元素
• prev();//当前元素之前的紧邻着的兄弟元素（上一个）
• prevAll();//当前元素之前的所有兄弟元素
• siblings();//当前元素的所有兄弟元素

html

<div>
       <input type="button" value="使第一个层变色" id="btn1" />
       <input type="button" value="使第三个层变色" id="btn2" />
   </div>

js

$("#btn1").click(function() {
       $("#div").prev().css('backgroundColor', "red");
   });

注意方法括号中可以加筛选的表达式，限制查找的元素

HTML 代码:
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

jQuery 代码:
$("p").prev(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

基本过滤选择器

:first选取第一个元素。$(“div:first”)选取第一个<div>

:last选取最后一个元素。$(“div:last”)选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$(“input:not(.myClass)”)选取样式名不是myClass的<input>

:even、:odd，选取索引是偶数、奇数的元素：$(“input:even”)选取索引是奇数的<input>

:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$(“input:lt(5)”)选取索引小于5的<input>

$(“:header”)选取所有的h1……h6元素（*）

$(“div:animated”)选取正在执行动画的<div>元素。 （*）

//大于索引2的又小于后面索引2的,每次筛选都是上次筛选,即每次筛选后索引都清零
$('div:gt(2):lt(2)').css('backgroundColor', 'yellow');

一些问题

如何判断对象是否存在

jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写

if ($("#btn1").length <= 0) {
	alert("id为btn1的元素不存在！");
 }

样式操作

addClass(class|fn)

概述

为每个匹配的元素添加指定的类名。

参数

class StringV1.0

一个或多个要添加到元素中的CSS类名，请用空格分开

function(index, class) FunctionV1.4

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

为匹配的元素加上 ‘selected’ 类

jQuery 代码:

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

removeClass([class|fn])

概述

从所有匹配的元素中删除全部或者指定的类。

参数

classStringV1.0

一个或多个要删除的CSS类名，请用空格分开

function(index, class)FunctionV1.4

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

从匹配的元素中删除 ‘selected’ 类

jQuery 代码:

$("p").removeClass("selected");

参数class 描述:

删除匹配元素的所有类

jQuery 代码:

$("p").removeClass();

回调函数描述:

删除最后一个元素上与前面重复的class

jQuery 代码:

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

toggleClass (class|fn[,sw])

概述

如果存在（不存在）就删除（添加）一个类。

参数

classStringV1.0

CSS类名

class,switchString,BooleanV1.3

1:要切换的CSS类名.

2:用于决定元素是否包含class的布尔值。

switchBooleanV1.4

用于决定元素是否包含class的布尔值。

function(index, class,switch)[, switch]Function,BooleanV1.4

1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

2: 一个用来判断样式类添加还是移除的 boolean 值。

示例

参数class 描述:

为匹配的元素切换 ‘selected’ 类

jQuery 代码:

$("p").toggleClass("selected");

参数class,switch 描述:

每点击三下加上一次 ‘highlight’ 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

var count = 0;
$("p").click(function(){
    $(this).toggleClass("highlight", count++ % 3 == 0);
});

回调函数 描述:

根据父元素来设置class属性

jQuery 代码:

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

hasClass(class)

概述

检查当前的元素是否含有某个特定的类，如果有，则返回true。

这其实就是 is(“.” + class)。

参数

classStringV1.2

用于匹配的类名