jQuery基础 (一) 样式篇_H5之家 - 中国HTML5教程资源分享第一站

正文

jquery学习笔记
1.环境搭建

进入官方网站获取最新的版本 1.x与 2.x，主要的区别在于

如果开发者比较在意老版本压缩版(compressed) 与开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

jQuery

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

alert 弹出以上信息，说明环境已经搭建成功了。

2.jQueryHelloWorld体验

<!DOCTYPE html>

<html>

<head>

<title>第一个简单的jQuery程序</title>

div{

padding:8px 0px;

font-size:12px;

text-align:center;

border:solid 1px #888;

}

</style>

$(document).ready(function() {

$("div").html("您好！");

});

</script>

</head>

<body>

</body>

</html>

代码分析：
$(document).ready

3.jQuery对象与DOM对象

对于才开始接触jQuery库的初学者，我们需要清楚认识一点：

jQuery对象与DOM对象是不一样的

可能一时半会分不清楚哪些是

通过一个简单的例子，简单区分下

我们要获取页面上这个

普通处理，通过标准JavaScript处理：

var p = document.getElementById('imooc');

p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';

p.style.color = 'red';

通过原生

jQuery的处理：

var $p = $('#imooc');

$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

通过

通过标准的

1. 通过

2. jQuery

3. 通过

4.jQuery对象转化成DOM对象

jQueryjQuery

如何把

利用数组下标的方式读取到

HTML代码

JavaScript代码

var $div = $('div') //jQuery对象

var div = $div[0] //转化成DOM对象

div.style.color = 'red' //操作dom对象的属性

用，数组的索引是从

通过

jQuery

var $div = $('div') //jQuery对象

var div = $div.get(0) //通过get方法，转化成DOM对象

div.style.color = 'red' //操作dom对象的属性

其实我们翻开源码，看看就知道了，

5.DOM对象转化成jQuery对象

相比较$(

如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

通过$(dom)

HTML代码

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象

var $div = $(div); //jQuery对象

var $first = $div.first(); //找到第一个div元素

$first.css('color', 'red'); //给第一个元素设置颜色

通过通过

6.id选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

jQuery

$( "#id" )

值得注意：

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

7.类选择器

类选择器，顾名思义，通过class样式类名来获取节点

描述：

$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

同样的

右边实现一个原生

我们不难发现：

jQuery除了选择上的简单，而且没有再次使用循环处理

不难想到

8.元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素

描述：

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

右边编辑器代码所示：

第一组：通过

var divs = document.getElementsByTagName('div');

divs

第二组：同样的效果，

9.全选择器（*选择器）

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符

描述：

$( "*" )

抛开

不难发现，

1. IE

2. getElementById

3. IE7

4. IE8及较低的版本，浏览器不支持getElementsByClassName

10.层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系

子元素后代元素兄弟元素相邻元素

通过一个列表，对比层级选择器的区别

仔细观察层级选择器之间还是有很多相似与不同点

1. 层级选择器都有一个参考节点

2. 后代选择器包含子选择器的选择的内容

3. 一般兄弟选择器包含相邻兄弟选择的内容

4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

11.基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此

筛选选择器的用法与

注意事项：

1. :eq(), :lt(), :gt(), :even, :odd

2. gt

12.内容筛选选择器

基本筛选选择器针对的都是元素

内容过滤器描述如下表：

注意事项：

1. :contains

2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3. :parent

13.可见性筛选选择器

元素有显示状态与隐藏状态，

描述如下：

这

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

1. CSS display

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。

可见元素的宽度或高度，是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

14.属性筛选选择器