Jquery

一、什么是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”);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不解风情的老妖怪哎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值