- jQuery基本概念
学习目标:学会如何使用Query，掌控Query的常用api，船够使用Query实现常见的效字。
1.1.为什么要学习jQuery ?
[01-让div显示与设置内容htmil]
便用javascript开发过程中，有许多的缺点:
1.查找元素的方法太少，麻烦。
2.遍历伪数细很麻烦，通常要嵌套一大堆的for循环。 - 3.有兼容性问题。
4.想要实现简单的动画效果，也很麻烦
5.代码冗余。
1.2. jQuery初体验
[02-让div显示与设置内容.html]
$(document).ready(function () (
$(“btnl”).click(functlon (
//隐式选代: 偷館的遍历，在Query中，不需要手动写for值环了，会自动进行遍历。
案例：
jQuery基础
【学时：2】
什么是jQuery
jQuery是一个JavaScript函数库，jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展，解决了 JS在不同浏览器中存在着大量的兼容性问题。
jQuery安装
1、jQuery 库是一个 JavaScript 文件，下载jquery.min.js到项目js文件夹，使用 HTML 的 <script> 标签引用它：
2、通过 CDN（内容分发网络） 引用。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的项目用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你项目用户是国外的可以使用谷歌和微软。
选择器
jQuery 选择器是对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1、元素选择器
jQuery 元素选择器基于元素名选取元素（标签）。
【示例】
2、ID选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
【示例】
3、类选择器
jQuery 类选择器可以通过指定的 class 查找元素。
【示例】
4、更多选择器
语法
描述
$("*")
选取所有元素
$(this)
选取当前 HTML 元素
$("p.intro")
选取 class 为 intro 的 <p> 元素
$("p:first")
选取第一个 <p> 元素
$("ul li:last")
选取最后一个 <ul> 元素的最后一个 <li> 元素
$("ul li:first-child")
选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")
选取带有 href 属性的元素
$("[name=ele]")
选取带有 name属性值等于ele的元素
$("a[target='_blank']")
选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")
选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")
选取偶数位置的 <tr> 元素
$("tr:odd")
选取奇数位置的 <tr> 元素
4.文档对象模型HTML DOM
当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,HTML DOM 模型被构造为对象的树：
5.文档就绪事件
如果在文档没有完全加载之前就运行函数，操作可能失败。
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作，我们将所有的 jQuery 函数位于一个 document ready 函数中：
文档就绪事件相当于JS的window.onload()，但就绪事件只需要等待DOM加载完成，不需要等待页面内容加载完成。
6.事件方法
页面对不同访问者的响应叫做事件。当 HTML 中发生某些事件时会调用的方法，这些方法称为事件处理程序。
常见 DOM 事件：
鼠标事件
键盘事件
表单事件
click
当单击元素时，发生 click 事件
keypress
键被按下
submit
当提交表单时，会发生 submit 事件
dblclick
当双击元素时，发生 dbclick 事件
keydown
键按下的过程
change
当元素的值发生改变时, 会发生 change事件
mouseenter
当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件
keyup
键被松开
focus
当元素获得焦点时, 会发生 focus 事件
mouseleave
当鼠标指针离开被选元素时，会发生 mouseleave 事件
blur
当元素失去焦点时, 会发生 blur
事件
hover
当鼠标指针悬停在被选元素会发生 hover 事件
【示例】
jQuery的版本
言网下载地址: ht/qeyp condowlad jQuery版本有很多，分为1x2x3x大版本分类:
1.x版本: 9F奋11678览器
2.x新本:不兼在1E678览器
1.x和02.x新本5que与不再更新断本了，现在只更新3.x新本。
3.x重本:不兼安1E678，更加的精简(在国内不充行，因为国内使用Query的主要目的就是兼容1E678)
关于压缩版和未压缩版
jeutry-1.12.4.nin.s:压缩版本，适用于生产环情，因为文件比较小，去除了注释、换行、空福等东西，但是基本没有可读性。jquery-1.12.4.js:未压级版本，适用于学习与开发环境，源码青晰。息阅读。
JQuery入口函数
根据需要在js代码执行前，需等待加载再执行js代码，原生js和jQuery中有两种常见的入口函数的写法，以下是他两的区别：
原生的js和jquery的区别
1、原生的js和jquery入口函数的加载模式不同原生的js会等到dom元素加载完毕，并且图片也加载完毕才会执行jquery会等到dom元素加载完毕，但不会等到图片加载完毕
2、原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的但是jquery后写的不会覆盖先写的，而且还会按顺序加载
jQuery入口函数的四种写法
需要引入jQuery文件
// 入口函数的第一种写法
$(document).ready(function(){
alert("hello jquery");
});
// 入口函数的第二种写法
jQuery(document).ready(function(){
alert("1");
});
// 第三种
$(function(){
alert("2");
});
// 第四种
jQuery(function(){
alert("4");
});
window.onload 与$(function(){})区别
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行；
//js的入口函数执行要比jQuery的入口函数执行得晚一些。
//jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。
//js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。
$(function(){})是$(document).ready()简写,$(document).ready() 是 dom 结构绘制完毕后就执行，不必等到加载完毕。
.什么是DOM对象(js对象)
//1.什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)//var cloth = document . getElementById("cloth");
//cloth. style.backgroundColor= "pink";
//2.什么是jq对象:使用jq的方式获取到的元素就是jq对象//var $li = $("li");
//$li.text("我改了内容");
//3. jq对象与js对象的区别
//js对象对象不能调用jq对象的方法
//var cloth = document. getElementById("cloth");//cloth. text("呵呵");
//4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合，伪数组，里面2存放了一大堆的js对象)
. jQuery对象与DOM对象的区别(重点)
1. DOIR象:使用JavaScript中的方法获职页面中的元素近回的对象就是so对像*
2. JQuery对象: Jquery对象就是使用jQuery的方法获职页面中的元素适回的对像就是的jQuery对象。
- jQuery对象其实就是dom对象的包装集《包装了dom对像的集合(伪数组》)
4. DOm与jquery对象的方法不能昆用
DOM对转换成jQuery对象
Var $obj=$(domobj);
$(document).ready(function(){}):就是典型00对象转JQuery对象
jQuery对转换成DOM对像:
var $1i=$("1i");第一种方法(推荐使用
$li[0]
第二种方法
$li.get(0)
隔行变色案例
mouseenter与mouseover的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
mouseover和mouseenter的异同体现在两个方面：
1. 是否支持冒泡
2.事件的触发时机
先看一张图，对这两件事有一个简单直观的感受。
mouseenter事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。
也就是说：mouseover支持事件冒泡，而mouseenter不支持事件冒泡
由于mouseenter不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但不会触发mouseenter和mouseleave事件。
如何模拟mouseenter事件
可见mouseover事件因其具有冒泡的性质，在子元素内移动的时候，频繁被触发，如果我们不希望如此，可以使用mouseenter事件代替之，但是早期只有ie浏览器支持该事件，虽然现在大多数高级浏览器都支持了mouseenter事件，但是难免会有些兼容问题，
js 中的index 属性可返回下拉列表中选项的索引位置
语法 ：optionObject.index
（意思在原生js中它是option的私有属性）
当在原生js中特别是在循环中，我们常自定义index属性
var liObj = document.getElementsByTagName("li");
for (var i=0;i<liObj.length;i++) {
liObj[i].index = i; //这里index相当于形参
}
liObj[i].index = i;
表示循环给liObj添加索引值和上面的原生js index有，这是自定义属性，当然这里的index相当于形参，自定义。
jquery index（） 定义和用法
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
alert($(this).index());
});
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
<script>
$("#u li").click(function(){
var a = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
var b = $('li').index($('#bar')); //1，传递一个jQuery对象
var c = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
var d = $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
var e = $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
alert(e);
});
$("#nav a").click(function(){
//四个经典的用法
var index1 = $("#nav a").index(this);
var index2 = $("#nav a").index($(this));
var index3 = $(this).index()
var index4 = $(this).index("a")
alert(index4);
return false;
});
</script>
2207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
