前端系列之jQuery(jQuery选择的艺术)

一.jQuery是什么？

•是一款JavaScript库

•方便地处理HTML、事件、动画等
html：处理HTML文档中的DOM节点，如添加、删除等
事件：通过jQuery对页面上的事件进行处理
动画：通过jQuery实现淡入、淡出、滑动等动画

•可以兼容多浏览器

•80%以上网站使用

如何安装和选择版本？

下载jQuery
•http://jquery.com/

如何使用？

如何选择版本？

》V1.x
》V2.x ：不兼容IE6-8
》V3.x ：分为精简版和普通版

我们选择1.12.4版本

CDN的使用

•Content Delivery Network内容分发网络
•https://code.jquery.com/

使用CDN好处：性能提高，加快下载速度。

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>

二.jQuery的基本概念

结构、表现和行为分离

$
window.jQuery === window.$

$.xxx
$.each(...)
$.noop
$.toArray()

$(xxx)
$('#myDiv')
$('.myClass')

$(domObject)->jQuery Object
$(xxx).get(0)->DOM Object
$(xxx)[0]->DOM Object

什么是Jquery对象？
1、是原生DOM对象的封装
2、jQuery对象和原生DOM对象不同
3、jQuery对象包含了很多方法，方便的操作DOM元素

注意：

$(document).ready(function(){...})   VS   window onload

如何创建元素

$(<div>Hello<div>)

三.jQuery的选择器

特点：
1）选择器允许您对元素组或单个元素进行操作。
2）jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。
$("p")选取`<p>`元素
$("p.intro")选取所有class="intro"的`<p>`元素
$("p#demo") 选取所有 id="demo" 的 `<p>` 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为蓝色:
实例:

$("p").css("background-color","blue");