1，jquery 定义
jquery 是一个快速，小巧且功能丰富的JavaScript库，可以跨多种浏览器工作，
本质：就是封装了很多方法的 js 库
2，如何使用 jquery
1, 第一步引入
2，写入口函数（防止页面标签还没有被渲染出来，入口函数就已经执行了）- 请看下面入口函数详情
3，找到要操作元素（jquery 选择器），去操作他（给他设置属性，样式，文本等等）
$(document).ready(function(){
$('div').width(100).height(100).css('color','red').text('我是输出的文本')
})
3，jquery 版本介绍
1，1.xx 版本1. 多是 支持老浏览器，比如 IE678， 已停止更新
2，2.xx 版本2. 多是 不支持老浏览器， 已停止更新
3，3.xx 版本3. 多是 不支持老浏览器，更新中
4，jquery 的入口函数
1，jquery 的入口函数两种书写方式
// 第一种
$(document).ready(function(){
})
// 第二种 更常用
$(function(){
})
2，jquery 与 原生 js 的入口函数区别
1，原生 js 入口函数不能写多个，但是 jquery 可以写多个
2，原生 js 入口函数执行在后，jquery 入口函数执行在前
* 原生 js 要等待页面上所有的资源（dom树，外部css，js链接等）都加载完毕后，执行
* jquery 等待页面上 dom 树加载完毕后执行
5，$ 解释
1，$ 是一个自执行函数
1，引入一个js文件，是会执行js文件中的代码
2，jquery 文件是一个自执行函数，执行还这个jquery文件中的代码，其实就是执行这个自执行函数
3，这个自执行文件就是给window对象添加一个 jquery 属性和 $ 属性
4，$ = jquery，是等价的，是一个函数
2，$ 是一个函数，参数不同，效果不同
1，参数是一个匿名函数 — 入口函数
$(function(){
})
2，参数是一个字符串 — 选择器
$(‘# divOne’)
3，参数是一个标签 —— 创建一个标签
$(‘<div>我是创建的标签</div>’)
4，参数是一个 dom 对象 — 就会把dom对象转换成 jquery 对象(详情请看下面 5)
6，dom 对象与jquery对象区别
1，区别
* dom 对象：原生js选择器获取到的对象，只能调用dom方法，
* jquery对象：用jquery选择器获取的对象，只能用jquery对象的属性和方法
jquery对象是一个伪数组（有下标，有length）；jquery对象其实就是dom对象的一个包装集
2，案例
// js - dom
var idValue = document.getElementById('idValue')
idValue.style.width = '600px'
// jquery
$('idValue').css('width','600px')
3，互相转换
a，dom对象转换成 jquery 对象
var idValue = document.getElementById('idValue')
var $idValue = $(idValue) // 转换成了jquery对象
b， jquery 对象转换成 dom对象
var $divs = $('div')
方法一：使用下标取出来
var div1 = $divs[0] // jquery 对象转换成 dom对象
方法二：使用jquery的方法，get（）
var div2 = $divs.get(1) // 转换成功
7，jquery 选择器
1，基本选择器
ID 选择器 ： $('#id') 获取指定id的元素
类选择器： $('.class') 获取同一类class的元素
标签选择器： $('div') 获取同一类标签的所有div
并集选择器： $('div,p,li') 使用逗号分隔，只要符合条件之一就可
交集选择器： $('div.redClass') 获取class为redClass的div元素
注：跟class选择器用法一样
2，层次选择器
自带选择器 $('ul > li') 使用 大于号，获取儿子层级的元素，注意，并不会获取子孙层级的元素
后代选择器 $('ul li') 使用空格，代表后代选择器，获取ul下所有li元素，包括子孙等
`注：这里不可以使用并集选择器，可以直接改为
$('ul > li, ul > p') // 获取ul下面所有的li标签，与ul下面是所有p标签
$('ul > li, p') // 获取ul下面所有的li标签，与页面中所有的p标签
$('#divValue div') // 获取id为divValue 这个div所有的后代div
3，过滤选择器
这类选择器都带冒号
:eq(index) $('li > :eq(2)').css('color','red') 获取到的li元素中，选择索引值为2的元素，颜色变为红色；index是索引值
:odd $('div:odd').css('color','red') // 设置所有div为奇数行的字体颜色为红色
:even $('div:even').css('color','red') // 设置所有div为偶数行的字体颜色为红色
8，jquery 其他选择器
children(selector) $('ul').children('li') 相当于$('ul-li')，子类选择器
find(selector) $('ul').find('li') 相当于$('ul li')，后代选择器
siblings(selector) $('#first').siblings('li') 查找兄弟节点，不包括自身
parent(selector) $('#first').parent('li') 查找父亲
eq(selector) $('li').eq(2) 找到li中索引值为2的对象
next(selector) $('li').next() 找下一个兄弟节点
prev(selector) $('li').prev() 找上一个兄弟节点
9，jquery 方法
1，增
1，append() - 在被选元素的结尾插入内容
$("p").append("追加文本")
2，prepend() - 在被选元素的开头插入内容
$("p").prepend("在开头追加文本");
3，after() - 在被选元素之后插入内容
$("img").after("在后面添加文本");
4，before() - 在被选元素之前插入内容
$("img").before("在前面添加文本");
2，删
1，remove() - 删除被选元素（及其子元素）
$("#div1").remove();
2，empty() - 从被选元素中删除子元素
$("#div1").empty();
注：remove(value) : 删除你选择的元素；value是你要删除的class名
$("p").remove(".italic");
3，改
1，text（value）：设置文本内容；value 是设置的文本值
$(function(){
$('idValue').click(function(){
// 会覆盖原来的内容，如果设置的文本中有标签，不会解析出来
$('div1').text(‘我是新设置的文本’)
})
})
2，html( value )：设置文本的内容；value是要设置的值
$("#test2").html("<b>Hello world!</b>")
3，val(value)：设置文本value值；value是要设置的文本值
$("#test3").val("RUNOOB")
4，attr（value）：设置文本的属性值；value是要设置的属性值
$("#runoob").attr("href","http://www.baidu.com");
5，css（name，value）:获取样式，name 是你要样式的准确名，value 是要设置的样式名的值
设置样式是行内标签
// 设置单样式
$('div1').css('width','400px') // 设置样式
// 设置多样式
$('div1').css({ // 设置样式
'width','400px'，
height: 100, // 这种方式也是可以实现的
'border','1px red solid'
})
6，addClass() ：给jquery对象增加类
$("body div:first").addClass("important blue");
7，removeClass() ：给jquery对象删除类
$("body div:first").removeClass("important");
8，toggleClass()：给元素进行添加/删除类的切换操作
$("body div:first").toggleClass("blue");
9，隐式迭代（只要返回是一个数组集合，此数组有这个方法，就可以继续执行）
$(this).text(wjx_sel).prevAll().text().nextAll().text()；// 一旦返回的不是一个数组，就会终止此方法运行
4，查
1，text（）：获取文本内容（传空值）
$(function(){
$('idValue').click(function(){
$('div1').text() // 会获取到这个标签中所有的文本，包括后代元素的文本
})
})
2，html（）：获取文本内容
$("#test").html(); // 注：当获取文本中值，里面代码不会编译
3，css（name）:获取样式，name 是你要样式的准确名
注：获取包含多个dom元素的jquery对象的样式，只能获取到第一个dom对象的样式
$('div1').css('width') // 获取样式
4，attr()：获取元素属性
<div href="//www.baidu.com" name="zhansui" id="runoob">百度一下</div>
$("#runoob").attr("href")
5，val()：获取表单的字段值
$("#test").val()
9，jquery 其他方法
1，设置宽高方法
1，width() ：设置或返回元素的宽度（不包括内边距、边框或外边距）
2，height()：设置或返回元素的高度（不包括内边距、边框或外边距）
3，innerWidth()： 返回元素的宽度（包括内边距）。
4，innerHeight()：返回元素的高度（包括内边距）。
5，outerWidth()：返回元素的宽度（包括内边距和边框）。
6，outerHeight()：返回元素的高度（包括内边距和边框）。
img_jquerydim.gif
2，遍历，向上迭代
1，parent()：被选元素的直接父元素
$("span").parent(); // 获取到了，可以对其进行操作
2，parents()：被选元素的所有父元素
$("span").parents()
3，parentsUntil()：返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div"); // 返回 span 与 div 之间层级中所有的父级元素
3，遍历，向下迭代
1，children()：返回被选元素的所有直接子元素。
$("div").children();
children()也可以使用可选参数来过滤对子元素的搜索。
$("div").children("p.pValue"); // 返回类名为 "pValue" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
2，find()：被选元素的后代元素，一路向下直到最后一个后代
$("div").find("span"); // 返回所有所选择元素的后代span元素
注：
$("div").find("*"); // 返回所有的div后代元素，部分标签
4，遍历，同胞元素
1，siblings()：被选元素的所有同胞元素。
$("h2").siblings(); // 返回 h2 标签的所有同胞元素
2，next()：被选元素的下一个同胞元素
$("h2").next(); // 返回被选元素的下一个同级元素
3，nextAll()：
$("h2").nextAll(); // 返回被选元素的所有跟随的同级元素
4，nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6"); // 返回介于h2 与 h6 之间的所有同胞元素
5，遍历，过滤
1，first()：返回被选元素的首个元素
$("div p").first(); // 返回选取首个 <div> 元素内部的第一个 <p> 元素：
2，last()：返回被选元素的最后一个元素。
$("div p").last() // 返回选择最后一个 <div> 元素中的最后一个 <p> 元素：
3，eq()：返回被选元素中带有指定索引号的元素
$("p").eq(1); // 返回第一个p标签元素
4，filter()：不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("p").filter(".url"); // 所有p标签中，没有class为 url 的类，都会被删除
5，not()：返回不匹配标准的所有元素
$("p").not(".url"); // 返回所有p标签中，没有url类的标签
10，jquery 常用的方法
1，show（）：隐藏被选元素
$("p").show(); // 被选中元素显示
2，hide（）：隐藏被选元素
$("p").hide(); // 被选中元素隐藏
3，toggle（）：hide() 和 show() 方法之间的切换
$("p").toggle(); // 被选中元素在显示与隐藏中切换
4，fadeIn（）：逐渐改变被选元素的不透明度，从隐藏到可见
$("p").fadeIn(); // 被选中元素p淡入效果
5，fadeOut（）：逐渐改变被选元素的不透明度，从可见到隐藏
$("p").fadeOut(); // 被选中元素p淡出效果
6，fadeToggle（）：在 fadeIn() 和 fadeOut() 方法之间进行切换
$("p").fadeToggle(); // 被选中元素p在淡入效果与淡出效果中切换
7，slideUp（）：通过调整高度来滑动隐藏被选元素
$("p").slideUp(); // 以向上滑动方式隐藏所有的 <p> 标签
8，slideDown（）：通过调整高度来滑动显示被选元素
$("p").slideDown(); // 以向下滑动方式显示所有的隐藏 <p> 标签
9，slideToggle（）：slideUp() 和 slideDown() 方法之间的切换
$("p").slideToggle(); // 以向上向下滑动方式显示隐藏所有的 <p> 标签
11，jquery Ajax
1，load()：从服务器加载数据，并把返回的数据放入被选元素中。
$("#div1").load("demo_test");// 把获取到文件中的数据返回到id为div1的标签中
$("#div1").load("demo_test.txt #p1");// 把获取到文件中id为p的数据返回到id为div1的标签中
注：onload（）函数可以支持回调
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function({
$("#div1").load("demo_test.txt",function(
responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
网友评论