一.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");