JQuery学习笔记(1)

认识JQuery

简介

JQuery是一个JavaScript库，语法简洁，有跨平台的兼容性，简化了开发人员遍历html文档、操作dom、处理事件、执行动画和开发Ajax的操作。理念是：写得少，做得多。

优点

1.轻量级。UglifyJS压缩后大小保持在30KB 2.选择器强大。 3.DOM操作封装。 4.可靠地事件处理机制。 5.完善的Ajax。

库类型

jquery.js（开发版） 约229kb,用于学习和开发。 jquery.min.js（生产版） 约31kb，用于产品和项目。

简单使用

1.页面引入：<scrpit src="http://www.mamicode.com/js/jquery.js" type="text/javascript"></script> 2.编写简易代码：$为JQuery的简写形式

$(document).ready(function(){
    alert("Hello World!"); 
});

3.链式操作：

//当点击level下的a时，添加current class，a后的元素显示，它父辈的同辈元素下的子元素a移除current class，其后元素隐藏
$(".level1 > a").click(function(){
    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
    return false;
}

4.DOM对象和jQuery对象 DOM(Documnet Object Model 文档对象模型)，每一份DOM可以表示为一棵树。可以通过JavaScript的getElementsByTagName或者getElementsById来获取元素节点。 jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象可以使用jQuery方法但是无法使用DOM对象的任何方法。 二者变量声明：

var $variable = jQuery对象;

var variable = DOM对象;

选择器

css选择器

css选择器分为标签选择器(td)，ID选择器(#td)，类选择器(.td)，群组选择器（td,p,div.a），后代选择器(#links a) 通配选择器（*）。

jQuery选择器

1.基本选择器

jQuery选择器继承了css风格。jQuery行为规则都必须在获取元素后才能生效。

//通过id选择元素示例
$("#td").css("color","red");

2.层次选择器

通过DOM元素之间的层次关系获取特定元素

//层次选择器示例 
//div下的所有span后代元素(后代元素可以是多级，子元素，子子元素等)
$("div span").css("background","$bbffaa");
//div下的所有span子元素
$("div>span").css("background","$bbffaa");
//class为one的next<div>元素
$(".one+div")  等价于$(".one").next("div");
//id为two的的元素后的所有<div>同辈元素
$("#two~div")  等价于$("#two").nextAll("div");

3.过滤选择器

通过特定的过滤规则来筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法相同。即一个选择器可以以冒号(:)开头。

//取第一个
$("div:first")
//取索引值为3
$("div:eq(3)")
//当前获取焦点的元素 (blur为失去焦点
$(":focus").css("background",#bbffaa);

4.内容选择器

//含有文本‘我‘的<div>元素
$("div:contains(‘我‘)")
//含有class为mini元素的<div>元素
$("div:has(‘.mini‘)")
$("div:has(p)")

5.属性过滤选择器

//title值等于test的<div>
$("div[title=test]")
//title以st结尾的<div>
$("div[title$=st]")

jQuery中的DOM操作

1.查找元素节点：用选择器完成

//<ul>里第二个<li>
var $li = $("ul li:eq(1)");	
var li_txt= $li.text();
alert(li_txt);

2.查找属性节点：用选择器获取元素后，可以用 attr() 方法 获取和设置 它的各种属性值。用 removeAttr() 可删除属性值。

用 text() 方法可以 获取和设置 元素的text值；用 val() 方法可以 获取和设置 元素的值

var $para = $("p");
var p_txt=$para.attr("title");
$para.attr("title","test");
//如果是添加设置class属性的话需要用addClass()方法，移除同理用removeClass()方法
$para.addClass("newclass");
//设置文本可以用text()
$("p").text("text");
//获取
$("p").text();

3.创建元素节点：创建新元素可使用jQuery的工厂函数 $() 来完成，用法为 $( html代码 )

//以添加<li>元素节点为例
var $li_1 = $("<li title=‘test‘>test</li>");
//用append加入到<ul>中
$("ul").append($li_1);

tips:无论 $(html)中的html代码多复杂，都可以使用同样的方式创建。

4.插入节点：

append() 方法外，还有prepend() ，after() ，before()等

5.删除节点:

通过选择器选择元素后，可以通过 .remove() 方法，将节点删除。

detach()方法，它删除后重新追加元素会保留绑定的事件。

empty()方法，清空节点中的所有后代节点。

6.切换样式：

toggle() 方法，可以让元素在两个样式间切换

$("p").togglelClass("another");

点击<p>后，如果another已经在<p>的class里了，就删除它；否则就添加它。