Jquery基本实现
目录
JQuery介绍
1.1 JQuery概述
1.2 JQuery框架的引入
1.3 JQuery的优势
1.4 JQuery的引入
1.5 演示代码树状图：
1.6 具体代码演示
01-Dom对象与Jquery包装对象.html
02-Jquery基础选择器.html
03-Jquery层次选择器.html
04-Jquery表单选择器.html
06-Jquery操作元素的样式.html
07-Jquery操作元素的内容.html
08-Jquery创建元素和添加元素.html
09-Jquery删除元素和遍历元素.html
10-Jquery-ready加载事件.html
11-Jquery绑定事件.html
一、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()返回false1、获取属性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");//checkedvar ck2 = $("#aa").prop("checked");//trueconsole.log(ck1);console.log(ck2);console.log("=====获取返回值为boolean类型的元素属性(元素设置了属性)=====")//获取返回值是boolean类型的元素属性(元素未设置属性)var ck3 = $("#aa").attr("checked");//undefinedvar ck4 = $("#aa").prop("checked");//falseconsole.log(ck3);console.log(ck4);console.log("=====获取返回值为boolean类型的元素属性(元素未设置属性)=====")//自定义属性var abc1 = $("#aa").attr("abc");//aabbccvar abc2 = $("#aa").prop("abc");//undefinedconsole.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() 获取元素的文本内容,不包含htmltext("text内容") 设置元素的文本内容,不包含htmlval() 获取元素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() 获取元素的文本内容,不包含htmlvar 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);//将此对象转换成Jqueryconsole.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>
