jquery基本实现-爱代码爱编程
目录
一、JQuery介绍
1.1 JQuery概述
JQuery是一个简洁快速的JavaScript框架。jQuery的设计宗旨是“write less，do more”，倡导写更少的代码，做更多的事。jQuery封装了一些常用的JavaScript的代码，提供了一套易于使用的API，实现了跨浏览器工作，使HTML文档的遍历操作、事件处理、动画设计和Ajax交互操作变得简单易行。
1.2 JQuery框架的引入
JQuery的官方地址：htttp://www.jquery.com
1.3 JQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
1.4 JQuery的引入
方式一：导入本地Jquery
在需要使用jQuery的地方以js引入方式引入（本地导入）
<script type="text/javascipt" src="jquery-x-x-x.js"></script>注：src路径位置为你本机JQuery存放地址
方式二：导入在线Jquery
我们可以通过在script的src属性中写一个网址来导入在线的jquery代码。 事实上，现在应用jquery的网站非常非常多，浏览器会在加载之前使用jquery的网站时就预先下载过jquery，因此到了我们这里就不用再次下载了，就算我们的jquery版本是一个新的没被浏览器加载过的版本，jquery的代码下载也会进行的很快，不过，如果你还是担心影响加载速度，本地导入jquery文件确实是最好的办法。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>//在此书写你的jquery代码 </script>
1.5 演示代码树状图：
1.6 具体代码演示
01-Dom对象与Jquery包装对象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom对象与Jquery包装对象</title>
</head>
<body>
<!--
Dom对象
通过js方式获取的元素对象(document)
Jquery对象
通过jquery的核心js文件,返回的是jquery包装集
-->
<div id="mydiv">Div标签</div>
<!--引入jquery的核心js文件-->
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//Dom对象
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divsDom = document.getElementsByName("div");
console.log(divsDom);
console.log("=====Dom对象=====")
//Jquery对象
//通过id选择器选择元素对象
var divJquery = $("#mydiv");
console.log(divJquery);
console.log("=====Jquery对象=====")
//Dom转Jquery对象
//只需利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);
console.log("=====Dom转Jquery对象=====")
//Jquery转Dom对象
//获取包装集对象中指定下标的元素,将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);
console.log("=====Jquery转Dom对象=====")
</script>
</body>
</html>02-Jquery基础选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery基础选择器</title>
</head>
<body>
</body>
<!--
基础选择器
id选择器 #id属性值 $("#id属性值") 选择id为指定值的对象(如果有多个同名id,则以第一个为准)
类选择器 .class属性值 $(".class属性值") 选择class为指定的元素对象
元素选择器 标签名/元素名 $("标签名/元素名") 选择所用指定标签的元素对象
通用选择器 * $("*") 选择页面中所有的元素对象
组合选择器 选择器1,选择器2,... $("选择器1,选择器2,...") 选择指定选择器选中的元素对象
-->
<div id="mydiv1">id选择器1 <span>span中的内容</span></div>
<div id="mydiv1" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//id选择器
var mydiv = $("#mydiv1");
console.log(mydiv);
console.log("=====id选择器=====");
//类选择器
var clas = $(".blue");
console.log(clas);
console.log("=====类选择器=====");
//元素选择器
var spans = $("span");
console.log(spans);
console.log("=====元素选择器=====");
//通用选择器
var all = $("*");
console.log(all);
console.log("=====通用选择器=====");
//组合选择器
var group = $("#mydiv1,div,.blue");
console.log(group);
console.log("=====组合选择器=====");
</script>
</html>03-Jquery层次选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery层次选择器</title>
<style type="text/css">
.testColor{
background: green;
}
.gray{
background: gray;
}
</style>
</head>
<body>
<!--
层次选择器
后代选择器
格式：父元素 指定元素(空格隔开)
示例：$("父元素 指定元素")
选择父元素的所有指定元素(包含第一代,第二代等)
子代选择器
格式：父元素 > 指定元素(大于号隔开)
示例：$("父元素 > 指定元素")
选择父元素的所有的第一代的指定元素
相邻选择器
格式：元素 + 指定元素(加号隔开)
示例：$("元素 + 指定元素")
选择元素的下一个指定元素(只会查找下一个元素,如果元素不存在,则获取不到)
同辈选择器
格式：元素 ~ 指定元素(波浪号隔开)
示例：$("元素 ~ 指定元素")
选择元素的下面的所有指定元素
-->
<div id="parent">层次选择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png" alt="" width="270" height="129"/>
<img src="http://www.baidu.com/img/bd_logo1.png" alt="" width="270" height="129"/>
</div>
<div>选择器2
<div>选择器2中的div</div>
</div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//后代选择器
var hd = $("#parent div");
console.log(hd);
console.log("=====后代选择器=====");
//子代选择器
var zd = $("#parent > div");
console.log(zd);
console.log("=====子代选择器=====");
//相邻选择器
var xl = $("#child + div");
console.log(xl);
console.log("=====相邻选择器=====");
//同辈选择器
var tb = $(".gray ~ img");
console.log(tb);
console.log("=====同辈选择器=====");
</script>
</body>
</html>04-Jquery表单选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<body>
<!--
表单选择器
表单选择器 :input 查找所有input元素:$(":input"),匹配input、textarea、select和button元素
文本框选择器 :text 查找所有文本框:$(":text")
密码框选择器 :password 查找所有密码框:$(":password")
单选按钮选择器 :radio 查找所有单选按钮:$(":radio")
复选框选择器 :checkbox 查找所有复选框:$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮:$(":submit")
图像域选择器 :image 查找所有图像域:$(":image")
重置按钮选择器 :reset 查找所有重置按钮:$(":reset")
按钮选择器 :button 查找所有按钮:$(":button")
文件域选择器 :file 查找所有文件域:$(":file")
-->
<form id="myform" name="myform" method="post">
<input type="hidden" name="uno" value="999" disabled="disabled">
姓名: <input type="text" id="username" name="username"> <br>
密码: <input type="password" id="password" name="password" value="123456"> <br>
年龄: <input type="radio" name="age" value="0" checked="checked">小屁孩
<input type="radio" name="age" value="1">你懂得 <br>
爱好: <input type="checkbox" name="like" value="乒乓球">乒乓球
<input type="checkbox" name="like" value="看电影">看电影
<input type="checkbox" name="like" value="编程">编程 <br>
住址: <select name="selectForm" id="selectForm">
<option value="-1" selected="selected">请选择</option>
<option value="0">衡阳</option>
<option value="1">长沙</option>
</select> <br>
简介: <textarea name="intro" id="intro" cols="30" rows="10"></textarea> <br>
头像: <input type="file"> <br>
<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="50" height="50">
<button type="submit" onclick="return checkForm()">提交</button>
<button type="reset">重置</button>
</form>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// 表单选择器 :input 查找所有input元素:$(":input"),匹配input、textarea、select和button元素
var inputs = $(":input");
console.log(inputs);
console.log("=====表单选择器=====");
//元素选择器
var inputs2 = $("input");
console.log(inputs2);
console.log("=====元素选择器=====");
// 文本框选择器 :text 查找所有文本框:$(":text")
var texts = $(":text");
console.log(texts);
console.log("=====文本框选择器=====");
// 密码框选择器 :password 查找所有密码框:$(":password")
var passwords = $(":password");
console.log(passwords);
console.log("=====密码框选择器=====");
// 单选按钮选择器 :radio 查找所有单选按钮:$(":radio")
var radios = $(":radio");
console.log(radios);
console.log("=====单选按钮选择器=====");
// 复选框选择器 :checkbox 查找所有复选框:$(":checkbox")
var checkboxs = $(":checkbox");
console.log(checkboxs);
console.log("=====复选框选择器=====");
// 提交按钮选择器 :submit 查找所有提交按钮:$(":submit")
var submits = $(":submit");
console.log(submits);
console.log("=====提交按钮选择器=====");
// 图像域选择器 :image 查找所有图像域:$(":image")
var images = $(":image");
console.log(images);
console.log("=====图像域选择器=====");
// 重置按钮选择器 :reset 查找所有重置按钮:$(":reset")
var resets = $(":reset");
console.log(resets);
console.log("=====重置按钮选择器=====");
// 按钮选择器 :button 查找所有按钮:$(":button")
var buttons = $(":button");
console.log(buttons);
console.log("=====按钮选择器=====");
// 文件域选择器 :file 查找所有文件域:$(":file")
var files = $(":file");
console.log(files);
console.log("=====文件域选择器=====");
</script>
</body>
</html>05-Jquery操作元素的属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的属性</title>
</head>
<body>
<!--
操作元素的属性
属性的分类
固有属性：元素本身就有的属性(id,name,class,style)
返回值是boolean的属性:checked,selected,disabled
自定义属性:用户自己定义的属性
区别
1、如果是固有属性,attr()和prop()方法均可操作
2、如果是自定义属性,attr()可操作,prop()不可操作
3、如果是返回值boolean类型的属性
若设置了属性,attr()返回具体的值,prop()返回true
若未设置属性,attr()返回undefined,prop()返回false
1、获取属性
attr("属性名")
prop("属性名")
2、设置属性
attr("属性名","属性值")
prop("属性名","属性值")
3、移除属性
removeAttr("属性名")
总结：
属性是boolean类型的就用prop()方法,其他自定义和固有属性都推荐用attr()方法
-->
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc" value="aa"> aa
<input type="checkbox" name="ch" id="bb"> bb
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//获取属性
//固有属性
var name = $("#aa").attr("name");
console.log(name);
var name2 = $("#aa").prop("name");
console.log(name2);
console.log("=====获取固有属性=====")
//获取返回值是boolean类型的元素属性(元素设置了属性)
var ck1 = $("#aa").attr("checked");//checked
var ck2 = $("#aa").prop("checked");//true
console.log(ck1);
console.log(ck2);
console.log("=====获取返回值为boolean类型的元素属性(元素设置了属性)=====")
//获取返回值是boolean类型的元素属性(元素未设置属性)
var ck3 = $("#aa").attr("checked");//undefined
var ck4 = $("#aa").prop("checked");//false
console.log(ck3);
console.log(ck4);
console.log("=====获取返回值为boolean类型的元素属性(元素未设置属性)=====")
//自定义属性
var abc1 = $("#aa").attr("abc");//aabbcc
var abc2 = $("#aa").prop("abc");//undefined
console.log(abc1);
console.log(abc2);
//设置属性与获取同理
//移除属性
$("#aa").removeAttr("checked");
</script>
</body>
</html>06-Jquery操作元素的样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的样式</title>
<style type="text/css">
div{
padding:8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green{
background: green;
}
.pink{
background: pink;
}
</style>
</head>
<body>
<!--
操作元素的样式
attr("class") 获取class属性的值,即样式名称
attr("class","样式名") 修改class属性的值,即修改样式
addClass("样式名") 添加样式名称(在原有基础上覆盖添加,原本样式会保留,如出现相同样式,则以css样式中后定义的为准)
css() 添加具体的样式
设置单个: css("style","background:red");
设置多个: css({"font-size":"50px","background":"red"});
removeClass(class) 移除样式名称
-->
<h3>CSS()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// attr("class") 获取class属性的值,即样式名称
var cla = $("#conBlue").attr("class");
console.log(cla);
console.log("=====获取属性的样式名=====")
// attr("class","样式名") 修改class属性的值,即修改样式
$("#conBlue").attr("class","green");
// addClass("样式名") 添加样式名称
$("#conBlue").addClass("class","pink");
// css() 添加具体的样式
$("#conRed").css({"font-size":"50px","background":"red"});
// removeClass(class) 移除样式名称
$("#conRed").removeClass("larger");
</script>
</body>
</html>07-Jquery操作元素的内容.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的内容</title>
</head>
<body>
<!--
操作元素的内容
html() 获取元素的html内容
html("html内容") 设定元素的html内容
text() 获取元素的文本内容,不包含html
text("text内容") 设置元素的文本内容,不包含html
val() 获取元素value值(表单元素)
val("值") 设定元素的value值(表单元素)
表单元素
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素
div、span、h1~h6、table、tr、td、li、p等
-->
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="html2"></div>
<div id="text"></div>
<div id="text2"></div>
<input type="text" name="uname" id="op" value="oop">
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// html("html内容") 设定元素的html内容
$("#html").html("<h2>上海</h2>");
$("#html2").html("上海");
// html() 获取元素的html内容
var html = $("#html").html();
console.log(html);
var html2 = $("#html2").html();
console.log(html2);
console.log("=====获取html内容=====");
// text("text内容") 设置元素的文本内容,不包含html
$("#text").text("北京");
$("#text2").text("<h2>北京</h2>");
// text() 获取元素的文本内容,不包含html
var text = $("#text").text();
console.log(text);
var text2 = $("#text2").text();
console.log(text2);
console.log("=====获取text内容=====");
// val("值") 设定元素的value值(表单元素)
$("#op").val("今天天气不错");
// val() 获取元素value值(表单元素)
var val = $("#op").val();
console.log(val);
console.log("=====获取val内容=====");
</script>
</body>
</html>08-Jquery创建元素和添加元素.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建元素和添加元素</title>
<style type="text/css">
div{
margin: 10px 0px;
}
span{
color: white;
padding: 8px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.pink{
background-color: pink;
}
.gray{
background-color: gray;
}
</style>
</head>
<body>
<!--
创建元素
$('元素内容');
例:$('<p>hello Jquery</p>');
添加元素
前追加子元素
prepend(content) 在被选元素内部的开头插入元素或内容,被追加的content参数,可以是字符,HTML元素标记
$(content).prependTo(selector) 把content元素或内容加入selector元素开头
后追加子元素
append(content) 在被选元素内部的结尾插入元素或内容,被追加的content参数,可以是字符,HTML元素标记
$(content).appendTo(selector) 把content元素或内容插入selector元素内,默认是在尾部
前追加同级元素
before() 在元素前插入指定的元素或内容:$(selector).before(content)
后追加同级元素
after() 在元素后插入指定的元素或内容:$(selector).after(content)
注：
在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置
如果元素本身存在(已有存在),会将元素直接剪切设置到指定位置
-->
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green"><span>小鲜肉</span></div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//创建元素
var p = "<p>这是一个p标签</p>"
console.log(p);
console.log($(p));
//添加元素
// 前追加子元素
// prepend(content) 在被选元素内部的开头插入元素或内容,被追加的content参数,可以是字符,HTML元素标记
var span = "<span>小奶狗</span>";
$(".green").prepend(span);
// $(content).prependTo(selector) 把content元素或内容加入selector元素开头
var span2 = "<span>小狼狗</span>";
$(span2).prependTo($(".green"));
// 后追加子元素
// append(content) 在被选元素内部的结尾插入元素或内容,被追加的content参数,可以是字符,HTML元素标记
var span3 = "<span>小奶狗2</span>";
$(".green").append(span3);
// $(content).appendTo(selector) 把content元素或内容插入selector元素内,默认是在尾部
var span4 = "<span>小狼狗2</span>";
$(span4).appendTo($(".green"));
//将已存在内容追加到指定元素中
$(".green").append($(".red"));
//同级追加
// 前追加同级元素
// before() 在元素前插入指定的元素或内容:$(selector).before(content)
var sp1 = "<span class='pink'>女神</span>";
$(".blue").before(sp1);
// 后追加同级元素
// after() 在元素后插入指定的元素或内容:$(selector).after(content)
var sp2 = "<span class='gray'>歌手</span>";
$(".blue").after(sp2);
</script>
</body>
</html>09-Jquery删除元素和遍历元素.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素和遍历元素</title>
<style type="text/css">
span{
color:white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<!--
删除元素
remove() 删除所选元素或指定的子元素,包括整个标签和内容一起删除
empty() 清空所选子元素的内容
遍历元素
$(selector).each(function(index,element)) 遍历元素
参数function为遍历时的回调函数
index为遍历元素的序列号,下标从0开始
element是当前的元素,此时是dom元素
-->
<h3>删除元素</h3>
<span class="green">Jquery <a href="#">删除</a></span>
<span class="blue">JavaSE</span>
<span class="green">HTTP</span>
<span class="blue">Servlet</span>
<span class="flog">Jquery</span>
<span class="flog">JavaSE</span>
<span class="flog">HTTP</span>
<span class="flog">Servlet</span>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//删除元素 删除所选元素或指定的子元素,包括整个标签和内容一起删除
$(".green").remove();
// //清空元素 清空所选子元素的内容
$(".blue").empty();
//遍历元素
// $(selector).each(function(index,element)) 遍历元素
// 参数function为遍历时的回调函数
// index为遍历元素的序列号,下标从0开始
$(".flog").each(function (index,element){
//输出下标
console.log(index);
//输出值
console.log(element);
//输出此对象
console.log(this);
//将此对象转换成Jquery
console.log($(this))
});
</script>
</body>
</html>10-Jquery-ready加载事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ready加载事件</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function (){
console.log($("#p1"));
});
$(function (){
console.log("ready加载事件...");
});
</script>
</head>
<body>
<!--
ready加载事件 又预加载事件
当页面的dom结构加载完毕后再执行
类似于js中的load事件
ready事件可书写多个
语法
$(document).ready(function(){
});
简写
$(function(){
});
-->
<p id="p1">文本内容</p>
</body>
</html>11-Jquery绑定事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
</head>
<body>
<!--
bind绑定事件
为被选中元素添加一个或多个事件处理程序,并绑定事件发生时运行的函数
语法
$(selector).bind(evenType[eventData,],handler(eventObject));
evenType 是一个字符串类型的事件类型,就是你所需要绑定的事件
[eventData,] 传递的参数 格式:{名:值,名2:值2}
handler(eventObject) 该事件触发执行的函数
绑定单个事件
bind绑定
$("元素").bind("事件类型",function(){
});
直接绑定
$("元素).事件名(function(){
});
绑定多个事件
bind绑定
1、同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型2 ..",function(){
});
2、为元素绑定多个事件,并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
});
3、为元素绑定多个事件,并设置对应的函数
指定元素.bind({
"事件类型":function(){
},
"事件类型":function(){
}
});
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
-->
<h3>bind()方法简单的绑定事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<input type="button" id="btntest" value="点击就不可用了">
<hr>
<button type="button" id="btn1">按钮1</button>
<button type="button" id="btn2">按钮2</button>
<button type="button" id="btn3">按钮3</button>
<button type="button" id="btn4">按钮4</button>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//绑定单个事件
$("#test").bind("click",function (){
alert("世上无难事,只怕有心人");
});
//原生js绑定事件
// document.getElementById("test").onclick = function (){
// alert("test...")
// }
//直接绑定
$("btntest").click(function (){
//禁用按钮
alert(this);
$(this).prop("disabled",true);
});
//绑定多个事件
//1、同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
alert("按钮1...");
});
//2、为元素绑定多个事件,并设置对应的函数
$("#btn2").bind("click",function (){
alert("按钮2被点击了...");
}).bind("mouseout",function (){
alert("按钮2移开了...");
});
//3、为元素绑定多个事件,并设置对应的函数
$("#btn3").bind({
"click":function (){
alert("按钮3被点击了...");
},
"mouseout":function (){
alert("按钮3移开了...");
}
});
//直接绑定
$("#btn4").click(function (){
alert("按钮4被点击了...");
}).mouseout(function (){
alert("按钮4移开了...");
});
</script>
</body>
</html>