jQuery学习篇

今天简单地学习了jQuery，为加深自己的印象，在此总结一下。

jQuery的简单介绍：jQuery是一个JS库，在这个库中将经常使用的JavaScript复杂的操作封装成了一个又一个方法，以后如果相对网页进行相关的操作，直接调用jQuery中的方法即可，说白了就是jQuery比JavaScript更简单，更方便，更好用。并且jQuery不存在兼容性的问题。jQuery官网：http://jquery.com/

如何使用jQuery？三个基本步骤

1、引包：

2、入口函数（两种不同的写法）：

$(document).ready(function () {
});

$(function(){
                });

3、功能实现：

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

简单小练习：jQuery初体验（通过点击按钮实现div的显示和文字的添加）

容易混淆的知识：DOM对象和jQuery对象的区别

DOM对象:用js方式获取到的对象叫DOM对象
jQuery对象:用jQuery方式获取到的对象为jQuery对象
DOM和jQuery是两个不同的对象，两者不能相互调用对方的方法。但可以通过转化来调用各自的方法。

DOM->jQuery
var text1=document.getelementById('text1');
$(text1).text('哈哈');

jQuery->DOM
var $li=$("li");
$li[1].style.background="red";

 

$的实质：$的实质是一个function（）即函数，所以以后用$时记得加上小括号 $();
括号内的参数：参数类型不同，执行的方法（功能）也不同。
1、参数是一个function,即入口函数。
$(function(){
});
2、参数是一个DOM对象，把DOM对象转化为jQuery对象
//入口函数
$(document).ready(function{
});
3、参数是一个字符串，可是是标签类型，id类型，类类型
$("div"); $("#btn1"); $(".current");

jQuery选择器的使用：jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

基本选择器：

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

 

层级选择器：

　

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟