前端-jQuery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端-jQuery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10439字，纯文字阅读大概需要15分钟。
内容图文
概念
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示： 除此之外，jQuery还提供了大量的插件。目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
安装
jQuery的版本：
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本
jQuery的下载
jQuery有两个版本：生成环境使用的和开发测试环境使用的。
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery的使用
jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的 外部JavaScript脚本文件一样的语法。
<head>
<script src="jquery-1.11.1.js"></script>
</head>
jQuery语法结构
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。
基础语法： $(selector).action()
说明： 美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件
文档就绪事件，实际就是文件加载事件。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法1:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
写法2：简介写法-推荐
$(function(){
// 开始写 jQuery 代码...
});
jQuery的ready方法与JavaScript中的onload相似，但是也有区别：
| window.onload | $(document).ready() | |
| 执 行 次 数 | 只能执行一次，如果执行第二次，第一次的 执行会被覆盖 | 可用执行多次，不会覆盖之前的执行 |
| 执 行 时 机 | 必须等待网页全部加载挖完毕（包括图片 等），然后再执行包裹的代码 | 只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码 |
| 简 写 方 式 | 无 | $(function(){ }); |
jQuery选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
它基于已经 存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
<script>
//1、标签选择器：
function htmlSelector(){
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
}
//2、id选择器
function idSelector(){
//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html());
}
//3、.class选择器
function classSelector(){
var list=$(".mydiv");
console.log(list.length);
}
//4、 全局选择器
function allSelector(){
var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);
for(var i=0;i<list.length;i++){
console.log(list[i]);//js的对象
}
}
//5、并集选择器
function andSelector(){
var list=$(".mydiv,p,li");
printList(list);
}
//6、后代选择器:包括所有的后代，儿子和孙子辈都有
function subSelector(){
var list=$("form input");
printList(list);
}
//7、子选择器：只有子元素
function sunSelector(){
var list=$("form>input");
printList(list);
}
//8、相邻选择器
function nextSelector(){
var list=$("label + input");
printList(list);
}
//9、同辈选择器
function sublingsSelector(){
var list=$("form ~ div");
printList(list);
}
//10、属性选择器
function attrSelector(){
var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
printList(list);
}
//11、可见性选择器
function seeSelector(){
//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素
list=$("input:hidden");
printList(list);
}
//文档就绪事件：页面加载完毕之后执行：
$(function(){
seeSelector();
});
</script>
jQuery常用函数
与标签内容相关函数
与标签属性相关函数
与标签样式相关函数
<script>
//1、与标签内容相关函数
function textFun(){
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的内容，包含了嵌套在内容的标签的内容
console.log(str1);
var str2=$("div").text();//获取的是所有匹配元素的标签中的文本信息，不包含标签内容
console.log(str2);
var str3=$("div").val();//val()只能获取到表单项元素的值，div不是表单元素，所有获取不到
console.log(str3);
var str4=$("input").val();//获取的是第一个匹配表单元素的value值,input是表单元素，所以可以获取到值
console.log(str4);
}
//2、与属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服！");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示十分被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
}
}
//3、与css相关的函数
function cssFun(){
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
}
</script>
jQuery中的事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常用DOM事件列表
| 鼠标事件 | 键盘事件 | 表单事件 | 件 文档/窗口事件 |
| click | keydown | submit | load |
| dblclick | keyup | change | |
| mouseover | focus | ||
| mouseout | blur | ||
| hover |
常用的 jQuery 事件方法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
<script>
//页面加载事件
$(function(){
//给所有的button绑定单击事件
$("button").click(function(){
//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有的超链接绑定鼠标移上事件
$("a").mouseover(function(){
var str=$(this).html();
$(this).html("鼠标移上-"+str);
});
//给所有的超链接绑定鼠标移出事件
$("a").mouseout(function(){
var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){
$(this).css("color","red");
});
});
</script>
jQuery操作DOM
元素的增加
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<script>
$(function(){
// append() - 在被选元素的结尾插入内容
$("#btn1").click(function(){
$("div").append("<br/>新添加的文本<br/>");
$("div").append("<p>新添加的段落</p>");
});
//prepend() - 在被选元素的开头插入内容
$("#btn2").click(function(){
$("div").prepend("<br/>新添加的文本<br/>");
$("div").prepend("<p>新添加的段落</p>");
});
//after() - 在被选元素之后插入内容
$("#btn3").click(function(){
$("div").after("<br/>新添加的文本<br/>");
$("div").after("<p>新添加的段落</p>");
});
//before() - 在被选元素之前插入内容
$("#btn4").click(function(){
$("div").before("<br/>新添加的文本<br/>");
$("div").before("<p>新添加的段落</p>");
});
});
</script>
元素的克隆
clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本
语法：$(selector).clone(includeEvents)；
参数：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。
<script>
$(function(){
$("#btn3").click(function(){
alert("试试就试试！");
});
// clone(true)
$("#btn1").click(function(){
$("p").clone(true).appendTo("div");
});
//clone(false)
$("#btn2").click(function(){
$("p").clone(false).appendTo("div");
});
});
</script>
元素的替换
- replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
- replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
<script>
$(function(){
//replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
$("#btn1").click(function(){
//$("div").replaceWith("<br/>新替换的文本<br/>");
$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
});
//replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
$("#btn2").click(function(){
$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
});
});
</script>
元素的删除
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
<script>
$(function(){
//remove() - 删除被选元素（及其子元素）
$("#btn1").click(function(){
$("div").remove();//所有的div元素及其子元素被删除
});
//remove(筛选条件) - 删除符合筛选条件的元素
$("#btn2").click(function(){
$("div").remove(".test");//所有的div元素中引用了class="test"的div被删除
});
//empty() - 从被选元素中删除子元素
$("#btn3").click(function(){
$("div").empty();//删除div中的所有子元素
});
});
</script>
jQuery效果
隐藏和显示
语法：
-
- $(selector).hide([speed,callback]);
- $(selector).show([speed,callback]);
- $(selector).toggle([speed,callback]);
参数说明： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script>
$(function(){
$("#btnHide").click(function(){
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000,function(){
alert("隐藏完成！");
});
});
$("#btnShow").click(function(){
//$("div").show();
//$("div").show(2000);
$("div").show(2000,function(){
alert("显示完成！");
});
});
$("#btnToggle").click(function(){
//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000,function(){
alert("切换完成！");
});
});
});
</script>
淡入和淡出
语法：
-
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
参数说明： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script>
$(function(){
$("#btnIn").click(function(){
//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000,function(){
alert("淡入完成！");
});
});
$("#btnOut").click(function(){
//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000,function(){
alert("淡出完成！");
});
});
$("#btnToggle").click(function(){
//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000,function(){
alert("切换完成！");
});
});
});
</script>
内容总结
以上是互联网集市为您收集整理的前端-jQuery全部内容，希望文章能够帮你解决前端-jQuery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。