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页面实 ...
随机推荐
- 深蓝词库转换2.4版发布,支持最新的搜狗用户词库备份bin格式
很高兴的告诉大家,感谢GitHub上的h4x3rotab提供python版的搜狗用户词库备份bin格式的解析算法,感谢tmxkn1提供了C#版的实现,深蓝词库转换终于迎来了一个重大更新,能够支持搜狗用 ...
- 教你如何在Drcom下使用路由器上校园网(以广东工业大学、极路由1S HC5661A为例)
免责声明: 在根据本教程进行实际操作时,如因您操作失误导致出现的一切意外,包括但不限于路由器变砖.故障.数据丢失等情况,概不负责: 该技术仅供学习交流,请勿将此技术应用于任何商业行为,所产生的法律责任 ...
- js一些梳理
浏览器组成 1.Shell部分2.内核内核的组成 1.渲染引擎 负责页面显示 2.JS引擎 3. 其他模块主流内核介绍 >> * Trident(IE内核) >> * Geck ...
- Element ui 日期限制范围
时间限定范围: <el-date-picker type="date" placeholder="选择日期" v-model="addForm. ...
- C#编程风格
开始实习之后,才发现自己是多么地菜.还有好多东西还要去学习. 公司很好,还可以帮你买书.有一天随口问了一下上司D,代码规范上面有什么要求.然后D在Amazon上面找到了这本书<C#编程风格(Th ...
- form单选框
form中的单选框: var resultStartRadio = new Ext.form.RadioGroup({ id : 'resultStartRadio', name :"for ...
- babel 插件编写
一.开始 工具链接: 每一个节点都有如下所示的接口(Interface): interface Node { type: string; } 字符串形式的 type 字段表示节点的类型(如: &quo ...
- NodeJs之EXCEL文件导入导出MongoDB数据库数据
NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...
- VBS 备份文件
http://www.cnblogs.com/top5/archive/2009/11/17/1604767.html 参考上面的博客 ' =============== 局域网文件自动备份 VBS ...
- mysql的btree和hash的区别
Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...