一、什么是jquery
jQuery是一个快速、简洁的JavaScript框架,类似:node.js 和angular.js。
二、jquery有什么用
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
三、jquery怎么使用
jQuery 版本 2 .0以上不支持 IE6,7,8 浏览器,所以一般选用jquery1.8等版本。
案例:获取图片的路径,并弹出提示
$(function(){
var img1 = $("#img1");
alert(img1.attr("src"));
})
通过该案例学习以下知识点:
1、jquery的引入方式分为二种:
(1)本地引入
<script type="text/javascript" src="jquery.js"></script>
(2)从网络引用
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery。
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
2、页面加载完成后执行
(1)完整写法
$(document).ready(function(){
});
(2)简写后
$(function(){
//jquery代码
})
与window.onload方法的区别与联系。
3、$:jQuery对象的别名(jQuery对象)
4、jquery选择器
(1)基本选择器
*
选择器 $(“*”)
类选择器 $(“.div1”)
Id选择器 $(“#div1”)
元素选择器 $(“p”)
juqery选择器选取的内容为js对象数组,不是jquery对象数组。
var imgs = $("img");
alert(imgs[0].src);
而不是如下取值:
alert(imgs[0].attr("src"));
(2)层级选择器
parent > child:定位某一个元素的内部元素
parent child
$(function(){
var imgs = $("#div1>img");
imgs.attr("src","imgs/cc.png");
})
Frist第一个元素 ------last 最后一个元素
$(function(){
var img = $("img:first");
alert(img.attr("src"));
})
:even 所有索引为偶数的元素(从0开始)
:odd 所有索引为奇数的元素(从0开始)
$(function(){
//返回的值为js对象
var img = $("img:odd");
alert(img[0].src);
})
$(this)选取当前元素
5、使用jquery获取/设置元素属性
(1)text() -->innerText
(2)html() -->innerHTML
(3)val() -->value
(4)属性:attr(“属性名称”,属性对应的值)
(5)判断/设置单选及复选属性prop
6、操作css
(1)操作具体属性
$(选择器).css(“样式属性”,“属性值”)
$(选择器).css({“样式属性”:“属性值”,…})
(2)操作类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
6、文档操作
(1)内部插入
$(A).append(B):在A元素末尾添加子元素B
$(document).ready(function(){
var p1 = $("#p1");
p1.append("<a href='aa.html'>aa链接</a>");
})
$(A).appendTo($(B)):把元素a添加到元素b中,a和b都为jquery对象,如果移动到一个对象后面则为移动,移动到多个对象后面则为复制
//把图片添加到a标签
$(document).ready(function(){
var img1 = $("imgb");
var a1 = $("a1");
img1.appendTo(a1);
})
$(A). prepend(B):在A元素开头添加子元素B
(2)外部插入
before:前面加 $(A). before(B) 在A元素之前添加元素B
after:后面加 $(A). after(B) 在A元素之后添加元素B
(3)删除元素
$(A).remove() 删除被选元素及其子元素。(同时删除)
$(A).empty() 删除被选元素的子元素。(只删子元素)
(4)替换
replaceAll(选择器)
$("<b>黑体替换所有p元素</b>").replaceAll("p");
replaceWith(内容)
$("p").replaceWith("<b>黑体替换所有p元素</b>");
8、jquery事件
$(选择器).事件名称(函数)
常见dom事件
$("p").click();
$("p").click(function(){ // 动作触发后执行的代码!! });
Mouserleave与Mouseout区别:
(1)Mouseover与Mouseout在鼠标移入移出时调用,在移入移出其子元素时也被调用。
(2)Mouseleave与Mouseenter在鼠标移入移出时调用,在移入移出其子元素时不被调用。
9、jquery效果
(1)隐藏和显示
$(“p”).hide() 隐藏
$(“p”).show() 显示
$(“p”).toggle() 隐藏和显示
可带参数(speed,callback)
Speed速度单位毫秒
可以取以下值:“slow”、“fast” 或毫秒 $(“p”).hide(1000)
Callback:回调函数
(2)淡入淡出
fadeIn() 用于淡入已隐藏的元素(speed,callback)
fadeOut() 方法用于淡出可见元素(speed,callback)
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,0.7,callback);
(3)滑动
jQuery slideDown() (speed,callback)
演示 jQuery slideDown() 方法。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
(4)动画
jQuery animate() 方法允许我们创建自定义的动画。
语法:
$(selector).animate({params},speed,callback);
案例:
$("div").animate({ left:'250px', opacity:'0.5', height:'150px',width:'150px' });
(5)结束动画
$("选择器").stop();
10、jQuery与js对象转换
jQuery对象转为js对象(Dom对象)
jQuery是一个数据对象,
(1)可以通过[index]的方法,来得到相应的DOM对象。
如:
var aa =$("#a") ; //jQuery对象
var bb=aa[0]; //DOM对象
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象。
如:
var aa =$("#a") ; //jQuery对象
var bb=aa.get(0); //DOM对象
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。
如:
$("<a href='#'>百度百度</a>");
11、jQuery链
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“div1” 元素首先会变为红色,然后向上滑动,再然后向下滑动。
十二、工具函数:
each
$("li").each(function(){
alert($(this).text())
});
Filter
filter:定位符合条件的当前元素:$(“p”).filter(“.p1”);
find
find定位的是符合条件的子元素 : $(“.div1”).find(“p”);