javascript基础 之 jQuery教程
1,jQuery是js的一个库
基本功能:
HTML元素获取和操作,html事件操作。
css操作。
js特效和动画
DOM遍历和修改
ajax
Utilities
特性:
js2以上的版本不支持ie678浏览器。如果要兼容ie678,请选择jq1.9
2,jquery基本格式
<head>
<meta charset="utf-8">
<title>index.php</title>
<script src="./jquery-3.3.1.min.js"> //导入jquery包
</script>
<script> //代码写在script中
$(document).ready(function(){ //页面加载完成后执行以下函数
$("p").click(function(){ //通过html元素的名字获取元素:$("元素名字")
$(this).hide(); //注意this。this代表的是click的那个元素
});
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
3,使用
1,自己下载production版本(成品)或者development版本(用于测试开发) ,放在本地引用。
2,通过内容分发网络引用
//本地引用的格式
<head>
<script src="jquery-1.10.2.min.js"></script>
</head> //网络分发,引用在线的库,以百度为例
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
4,语法
$(selector).action()
实例:
$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素,class用点,这和css一样 $("#test").hide() - 隐藏所有 id="test" 的元素,id用井号,这和css也一样 $(document).ready(function(){xxx代码}); - 文档就绪以后执行,简写为:$(function(){xxx代码});;
5,选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
实例:
$(document).ready(function(){
$("button").click(function(){ //获取button,定义它的一个点击事件
$("p").hide(); //获取所有的p元素,执行隐藏事件
});
});
//其他获取元素的方式:
$("#test").hide(); //获取id等于test的元素,执行隐藏事件
$(".test").hide(); //获取class等于test的元素,执行隐藏事件
$("*") //获取所有元素
$(this) //获取当前的html元素
$("p:first") //获取第一个p元素
$("[href]") //选取带有href属性的元素
6,jquery事件
页面对不同访问者的响应叫做事件。事件常用术语:触发,常见的dom事件如下:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | hover | blur | unload |
实例:
//click() 单击某个段落的时候执行隐藏自己
$("p").click(function(){
$(this).hide();
}); //dblclick() 双击元素的时候执行某个事件
$("p").dblclick(function(){
$(this).hide();
}); //mouseenter() 鼠标移入元素时候,发生mouseenter事件
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
}); //mouseleave() 鼠标离开元素的时候发生的事件
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
}); //mousedown() 鼠标不仅仅在段落上,并且按下的瞬间,执行某函数
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
}); //mouseup() 鼠标不仅仅在段落上,按下然后松开的瞬间执行的事件
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
}); //hover()模拟光标悬停事件,定义两个函数,当鼠标移动到元素上的时候,会触发第一个函数,鼠标离开的时候执行第二个
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
} ); //focus() 获得焦点的时候发生focus事件,
$("input").foucs(function(){ //实例是,当鼠标点到文本框里去的时候,文本框的背景变色
$(this).css("backgroud_color","#ccccc"); //注意一下css如何操控
})
//blur当元素失去焦点的时候发生blur事件,常常和foucs事件一块使用
$("input").blur(function(){ //当鼠标从文本框中离开的时候执行
$(this).css("background-color","#ffffff")
});
7,jq效果
1,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。实例不多说。但是要注意他们的附带参数:
$(document).ready(function(){
$(".hidebtn").click(function(){ //class等于hidebtn的元素点击的时候发生一个事件
$("div").hide(1000,function(){ //这个事件是让div在1秒时间中缓缓消失,然后调用一个函数,官方名字叫回调函数
alert("Hide() 方法已完成!");
});
});
}); //语法:$(selector).hide(speed,callback);
2,toggle()函数,相当于hide和show的集合体,点击以后出现或者消失
//用法
$("button").click(function(){
$("p").toggle();
});
3,淡入 淡出元素(fadeIn(),fadeOut()用法基本一样)
$("button").click(function(){
$("#div2").fadeIn(); //淡入
$("#div3").fadeIn(3000); //带事件参数的淡入,三秒内淡入
});
4,淡入淡出之间进行替换:fadeToggle()
$("button").click(function(){
$("#div1").fadeToggle();
$("#div3").fadeToggle(3000);
}); //格式:$(selector).fadeToggle(speed,callback);
5,变到一定的透明度,fadeTo()
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
}); //$(selector).fadeTo(speed,opacity,callback);opacity:透明度,介于0和1
6,滑动slideDown()和slideUp()
$("#flip").click(function(){
$("#panel").slideDown();
});
//$(selector).slideDown(speed,callback);
//滑动的意思是向下滑动并且出现
7, 点击滑动出现或者消失slideToggle() 方法,也就是可以在 slideDown() 与 slideUp() 方法之间进行切换。
格式:$(selector).slideToggle(speed,callback);
8,jQuery animate() 方法用于创建自定义动画
格式:$(selector).animate({params},speed,callback); //params指的是css的属性;speed可以说fast或者slow
//例1
$("button").click(function(){
$("div").animate({left:'250px'});
});
//例2
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
//html的position属性为relative,fixed或者abslote
注意:params中不能操纵css的颜色,写法也需要改成没有短横的那种:padding-left改成paddingLeft。有些元素还可以使用相对值,如:$("div").animate({ left:'250px',height:'+150px'});
9,stop()方法,用于在动画效果停止前,让它静止
语法:$(selector).stop(stopAll,goToEnd);
10,Callback()方法,就是执行完前面的函数(包括动画或者动作)以后,执行回调函数
11.链,意思是它允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
8,jquery dom设置内容或者属性
DOM = Document Object Model(文档对象模型)
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() - 获取属性值
获取dom内容或者属性 实例:
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); //text是某元素的内容,就是document中的innerHTML
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); //html的意思是获取这个元素的内容加htnl标识,类似于<p>这样的
});
$("#btn1").click(function(){
alert("值为: " + $("#test").val()); //获取id等于test的文本框的输入,相当于原版写法里的.value
});
$("button").click(function(){
alert($("#runoob").attr("href")); //获取id等于runoob的href属性
});
修改dom内容或者属性 实例:
$("#btn1").click(function(){
$("#test1").text("Hello world!"); //改HTML
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>"); //改html
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB"); //改value
});
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery"); //把元素的href属性设置为新的网址
});
为dom方法设置回调函数 ,
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
实例:
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
}); //注意,这个origText应该指代的是旧文本 $("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
}); $("button").click(function(){
$("#runoob").attr("href", function(i,origValue){ //origValue旧的值
return origValue + "/jquery";
});
});
9,jq 添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").append("追加文本"); //在p后面追加文本,注意,像列表序号标识这样的信息,需要同时写入到append的括号里去,比如$("ol").append("<li>追加列表项</li>") $("p").prepend("在开头追加文本"); //在开头追加文本 //*三种方式创建html元素
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签直接创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本,因为p元素还没有创建,所以不能使用$(')
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
$("img").after("在后面添加文本"); //在选中的元素之前添加文本 $("img").before("<p>在前面添加文本</p>"); //在选中的元素之后添加文本,注意,带上html元素标签比较好
10,jq删除元素
- remove() - 删除被选元素(及其子元素):$("#div1").remove();
- empty() - 从被选元素中删除子元素:$("#div1").empty(); //子元素被移除以后div大小又可能变化
- 选择性删除:$("p").remove(".italic"); //class=italic的所有的p元素
11,jq对元素的css操作
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
//addClass()方法 $("h1,h2,p").addClass("blue"); //为好几个元素新加上一个class=blue的属性,这样,css表中的blue的样式h1,h2,p也会具有
$("div").addClass("important blue"); //可以一次性添加多个元素和多个种类 //removeClass()方法
$("h1,h2,p").removeClass("blue"); //给某个或者某些元素删除它的一个class属性 //toggleClass() 方法
$("h1,h2,p").toggleClass("blue"); //如果元素具有class=xxx的属性,那就删除,如果没有,那就给它附上
12,jq对css的操作
实例
//获取某元素的css的背景颜色属性
$("p").css("background-color"); //修改某元素的背景颜色属性
$("p").css("background-color","yellow"); //设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});
//请注意格式:1大括号,2引号冒号 3逗号
13.jq处理元素和浏览器窗口的尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
//width()和height(),不包括内边距、边框或外边距
$("#div1").width() //id=div1的宽度,单位是px
$("#div1").height(); //innerWith()和innerHeight() 包括内边距
$("#div1").innerWidth()
$("#div1").innerHeight() //outerWidth()和outerHeight() 包括内边距和边框
$("#div1").outerWidth()
$("#div1").outerHeight()
14 jq元素的遍历
父元素:(向上遍历)
- parent() // $("span").parent()单指span上一级的父元素
- parents() //$("span").parents()返回span元素所有的祖先,像这样单选某个祖先也是可以的$("span").parents("ul")
- parentsUntil() //$("span").parentsUntil("div")parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
子元素:(向下遍历)
- children() //$("div").children()返回下一级的dom树
- find() //返回所有的后代元素:$("div").find("*"); 返回后代所有的span元素:$("div").find("span");
水平遍历:
- siblings() //返回被选元素的同胞元素。$("h2").siblings().css({"color":"red","border":"2px solid red"});让h2的同胞更改一些css属性,并不包括h2
- next() //返回被选元素的下一个同胞元素
- nextAll() //nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() //nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() //返回被选元素的前一个同胞元素
- prevAll() //返回被选元素前面所有的同胞元素
- prevUntil() //返回介于两个给定参数之间的所有跟随的同胞元素
过滤:
first() //$("div p").first().css("background-color","yellow"); 选取div下的第一个p
last() //选取div下最后一个p
eq() //按照索引号选取,$("p").eq(1)为所有的p元素编号,选取第二个(从0开始)
filter() //选取符合某个标准的某些元素 $("p").filter(".url");选取class=url的所有的p元素
not() //方法与 filter() 相反。选取不带有某个属性的那些某元素
javascript基础 之 jQuery教程的更多相关文章
- Web开发——JavaScript基础(JSON教程)
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- 《JavaScript基础教程(第8版)》PDF
简介:JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS.DOM.Ajax.jQuery等技术.书中从JavaScript语言基础开始,分别讨论了图像.框架.浏览 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- javascript基础教程学习总结(1)
摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...
- [转载]javascript+ajax+jquery教程11--正则表达式
原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- web前端学习(四)JavaScript学习笔记部分(1)-- JavaScript基础教程
1.JavaScript基础教程 1.1.Javascript基础-介绍.实现.输出 1.1.1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务端.p ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- 使用jQuery快速高效制作网页交互特效第一章JavaScript基础
JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...
随机推荐
- cordova 自定义 plugin
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_30879415/article/details/81265455准备工作安装cordovanp ...
- DotNetCore 3.0 助力 WPF 开发
DotNetCore Is AnyWhere. 前言 Visual Studio 2019 已经正式发布了,DotNetCore 3.0 的正式版也指日可待.在之前的版本中,作为一名基于微软生态的传统 ...
- Android Studio3.x上使用Lombok
1.添加gradle依赖 implementation 'org.projectlombok:lombok:1.16.8' //添加lombok依赖implementation 'org.glassf ...
- 初识Haskell 五:自定义数据类型和类型类
对Discrete Mathematics Using a Computer的第一章Introduction to Haskell进行总结.环境Windows 自定义数据类型 data type de ...
- hdu-1054(二分图最大匹配)
题意:给你一个图,图里有墙壁和空地,空地可以放置一台机关枪,机关枪可以朝着四个方向发射,子弹不能穿透墙壁,但是射程无限,机关枪会被损坏如果被另一台机关枪的子弹打到,问你最多能放置多少台机关枪: 解题思 ...
- xgboost 非官方每天编译
xgboost http://ssl.picnet.com.au/xgboost/ 非官方每天编译
- 内置函数(sorted、map、enumerate、filter、reduce)
1.sorted() 语法: sorted(iterable, cmp=None, key=None, reverse=False) 把iterable中的items进行排序之后,返回一个新的列表,原 ...
- js中字符串可以调用的方法
var s = "hello,world" //定义一个字符串 s.length() // => 11 s.charAt(0) ...
- 查看macOS下正在使用的zsh
使用dscl . -read /Users/$USER UserShell查看 如果你的结果是/bin/zsh,又恰巧用brew安装了zsh的话,那么你可能就白安装了 将brew安装的zsh添加到/e ...
- localhost 和 127.0.0.1 认识
概念和工作原理 1.概念: localhost:也叫local ,正确的解释是:本地服务器 127.0.0.1:在windows等系统的正确解释是:本机地址(本机服务器) 2.工作原理 localho ...