HTML-jQuery入门
2024-05-12 12:33:23
参考资料：
jQuery中文在线手册
jQuery入门
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jquery入门</title><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){alert("hello jquery!");});</script></head><body></body>
</html>JS与JQ页面加载区别
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS与JQ页面加载区别</title><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>window.onload = function(){alert("张三");}//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)window.onload = function(){alert("老王");}//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)jQuery(document).ready(function(){alert("李四");});//JQ不存在覆盖问题，加载的时候是顺序执行$(document).ready(function(){alert("王五");});//简写方式$(function(){alert("汾九");});</script></head><body></body>
</html>
JQ获取
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JQ的获取</title><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){//1.JS方式获取/*document.getElementById("btn").onclick= function(){location.href="惊喜.html";}*///2.JQ方式获取=====>>>$("#btn")$("#btn").click(function(){location.href="惊喜.html"});});</script></head><body><input type="button" value="点我有惊喜" id="btn"/></body>
</html>Dom与JQ对象之间的转换
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Dom与JQ对象之间的转换</title><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>function write1(){//1.JS的DOM操作//document.getElementById("span1").innerHTML="萌萌哒！";//DOM对象无法操作JQ对象里面属性和方法//document.getElementById("span1").html("萌萌哒！");var spanEle = document.getElementById("span1");//将DOM对象转换成JQ对象$(spanEle).html("思密达");}$(function(){$("#btn").click(function(){//JQ对象无法操作JS里面的属性和方法！！！//$("#span1").innerHTML="呵呵哒！"$("#span1").html("呵呵哒！");//JQ对象向DOM对象转换方式一$("#span1").get(0).innerHTML="美美哒！";//JQ对象向DOM对象转换方式二$("#span1")[0].innerHTML="棒棒哒！";});});</script></head><body><input type="button" value="JS写入" onclick="write1()"/><input type="button" value="JQ写入" id="btn"/><br />班长：<span id="span1">你好帅！</span></body>
</html>
jQuery基本选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本选择器</title><link rel="stylesheet" href="../../css/style.css" /><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){$("#one").css("background-color","pink");});$("#btn2").click(function(){$(".mini").css("background-color","pink");});$("#btn3").click(function(){$("div").css("background-color","pink");});$("#btn4").click(function(){$("*").css("background-color","pink");});$("#btn5").click(function(){$("#two,.mini").css("background-color","pink");});});</script></head><body><input type="button" id="btn1" value="选择为one的元素"/><input type="button" id="btn2" value="选择样式为mini的元素"/><input type="button" id="btn3" value="选择所有的div元素"/><input type="button" id="btn4" value="选择所有元素"/><input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>jQuery层级选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" type="text/css" href="../../css/style.css"/><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background-color","gold");});$("#btn2").click(function(){$("body>div").css("background-color","gold");});$("#btn3").click(function(){$("#two+div").css("background-color","gold");});$("#btn4").click(function(){$("#one~div").css("background-color","gold");});});</script></head><body><input type="button" id="btn1" value="选择body中的所有的div元素"/><input type="button" id="btn2" value="选择body中的第一级的孩子"/><input type="button" id="btn3" value="选择id为two的元素的下一个元素"/><input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>jQuery基本过滤选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本过滤选择器</title><link rel="stylesheet" href="../../css/style.css" type="text/css"/><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){$("body div:first").css("background-color","red");});$("#btn2").click(function(){$("body div:last").css("background-color","red");});$("#btn3").click(function(){$("body div:odd").css("background-color","red");});$("#btn4").click(function(){$("body div:even").css("background-color","red");});});</script></head><body><input type="button" id="btn1" value="body中的第一个div元素"/><input type="button" id="btn2" value="body中的最后一个div元素"/><input type="button" id="btn3" value="选择body中的奇数的div"/><input type="button" id="btn4" value="选择body中的偶数的div"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>jQuery属性选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>属性选择器</title><link rel="stylesheet" href="../../css/style.css" /><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){$("div[id]").css("background-color","red");});$("#btn2").click(function(){$("div[id='two']").css("background-color","red");});});</script></head><body><input type="button" id="btn1" value="选择有id属性的div"/><input type="button" id="btn2" value="选择有id属性的值为two的div"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>jQuery表单选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单选择器</title></head><body><input type="button" id="btn1" value="选择所有input元素" /><input type="button" id="btn2" value="选择文本框" /><br/><form><input type="text" /><br /><input type="checkbox" /><br /><input type="radio" /><br /><input type="image" /><br /><input type="file" /><br /><input type="submit" /><input type="reset" /><br /><input type="password" /><br /><input type="button" /><br /><select><option/></select><br /><textarea></textarea><br /><button></button></form></body>
</html>jQuery实现复选框的全选和全不选
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用jQuery完成复选框的全选和全不选</title><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--><script>$(function(){$("#select").click(function(){//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。//attr方法与JQ的版本有关，在1.8.3及以下有效。//$("tbody input").attr("checked",this.checked);$("tbody input").prop("checked",this.checked);});});</script></head><body><table border="1" width="500" height="50" align="center" id="tbl" ><thead><tr><td colspan="4"><input type="button" value="添加" /><input type="button" value="删除" /></td></tr><tr><th><input type="checkbox" id="select"></th><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr ><td><input type="checkbox" class="selectOne"/></td><td>1</td><td>张三</td><td>22</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>2</td><td>李四</td><td>25</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>3</td><td>王五</td><td>27</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>4</td><td>赵六</td><td>29</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>5</td><td>田七</td><td>30</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>6</td><td>汾九</td><td>20</td></tr></tbody></table></body>
</html>
HTML-jQuery入门相关推荐
- Jquery入门详解
JQuery 入门介绍 1.JQuery概述:Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(I ...
- jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件 一.事件初探 加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
- jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery——入门（二）动画
jQuery -- 入门(二)动画/效果 一.案例解析 hide([speed,[easing],[fn]]) []:意思表示的方括号中的东西是可选的,可有可无的: []中,会有对应的参数名称[变量名 ...
- jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用 一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
- jQuery入门[1]－构造函数
jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery入门[4]-链式代码 jQuery入门[5]-AJAX jQuery入门[6]-动画 JQu ...
- jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
- jQuery入门 jQuery入门第三天
jQuery入门 jQuery入门第三天 老师:黑马程序员 文章目录 jQuery入门 jQuery入门第三天 老师:黑马程序员 3. jQuery事件 3.1 jQuery事件注册 3.1.1 单个 ...
- JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
- jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
最新文章
- 深入探讨PHP中的内存管理问题
- 在windows XP运行3660路由器仿真器
- SD-WAN — 云专线（企业入云）
- shell脚本的执行方式
- 摄像头夜间拍摄画面有拖影_iQOO 3延续vivo人像拍摄基因 这些技术必须了解
- [数据结构-严蔚敏版]P46栈的顺序存储表示
- 温度补偿计算公式_一种工业用温度测量模块的设计与实现
- 操作系统之文件管理：7、文件共享与文件保护(软连接、硬链接、口令保护、加密保护、访问控制)
- 自己动手做cpu_如何建立一个自己动手做心动追踪装置
- 提高代码的运行效率 （4）
- ORA-29538、ORA-29532、ORA-29913问题解决
- 【BZOJ1179】[Apio2009]Atm/抢掠计划
- 帆软JS实现局部刷新CPT
- 软件测试行业前景,人才稀缺
- Vivado18.3的安装 安装教程
- Android如何在免Root下自动Pay（非人为非无障碍），引起的深思？
- MapGIS格式转ArcGIS方法
- WORD VBA 操作WORD 文本框
- 在哪里看服务器cpu占用率,top命令查看服务器cpu使用情况等
- 最全前端面试问题及答案总结