第5章 初识JQuery
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的
JQuery的优势:
体积小,压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
引入Jquery库:
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
JQuery加载页面触发:
<script type="text/javascript">
/*js代码*/
window.οnlοad=function(){
alert('js加载一');
};
/*jquery代码*/
$(document).ready(function(){
alert('Jquery加载一');
});
jQuery(document).ready(function(){
alert('Jquery加载二');
});
/*对Jquery加载上面两种方式的简写*/
$(function(){
alert('Jquery加载三');
});
</script>
window.onload和$(document).ready区别:
window.onload只能有一个,没有简写方式,必须等待页面所有资源加载完毕之后才能触发
$(document).ready可有多个,简介为$(function(){//代码}),等待页面上所有文档结构(html标签)记载完后触发
JQuery设置样式:
<script type="text/javascript">
/*操作样式addClass()方法*/
$(function(){
//其实上就是动态的给标签加了一个class属性
/* $("#whtdiv").addClass("wht"); */
//单个设置css
/* $("#lldiv").css("color","yellow");
//设置多个
$("#lldiv").css({"border":"1px solid blue","background-color":"pink"});
//链式方式
$("#whtdiv").css("color","green").css("border","1px solid blue"); */
//下一个元素
$("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");
});
</script>
JQuery常用方法和事件:详情请见W3C
$(function(){
/*给显示图片按钮注册一个click事件*/
$("#show").click(function(){
$("#imgs").slideDown(3000);
});
$("#hide").click(function(){
$("#imgs").slideUp(3000);
});
});
----------------------------------------
$(function(){
$("li").mouseover(function(){
//不能用$("li")
$(this).css("color","blue");
}).mouseout(function(){
$(this).css("color","black");
});
});
JQuery对象和Dom对象的相互转换:
<script type="text/javascript">
$(function(){
/*js获取dom对象*/
/* var dom=document.getElementById("wht5"); */
/* alert(dom.innerHTML); */
/* alert(dom.innerText); */
/* 获取value属性值*/
/* alert(dom.value); */
/*jquery对象*/
/* var $jdom=$("#wht5"); */
/* alert(jdom.html()); */
/* alert(jdom.text()); */
/* 一般用于表单*/
/* alert($jdom.val()); */
/*Dom对象转换Jquery对象*/
var dom=document.getElementById("wht");
var $jdom=$(dom);
$jdom.html();
/*jquery转dom对象*/
var $jdom=$("#wht5");
var dom=$jdom[0];
/* var dom=$jdom.get(0); */
alert(dom.value);
});
</script>
转载于:https://www.cnblogs.com/Chencheno/p/11009408.html
第5章 初识JQuery相关推荐
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
- Hadoop权威指南 _03_第I部分Hadoop基础知识_第1章初识Hadoop.
第I部分Hadoop基础知识 第1章初识Hadoop. 比较喜欢这句极其形象的比喻. "在古时候,人们用牛来拉重物.当一头牛拉不动根圆木时,人们从来没有考虑过要想方设法培育出一种更强壮的牛. ...
- 跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言 跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
- 第一章 初识Mathematica
第一章 初识Mathematica 1.Mathematica是什么 Matematica是由美国Wolfram公司研究开发的一个著名的数学软件,它提供了非常强大的功能,能够完成符号运算.数学图 ...
- 《Python爬虫开发与项目实战》——第3章 初识网络爬虫 3.1 网络爬虫概述
本节书摘来自华章计算机<Python爬虫开发与项目实战>一书中的第3章,第3.1节,作者:范传辉著,更多章节内容可以访问云栖社区"华章计算机"公众号查看 第3章 初识网 ...
- 《开源硬件创客——15个酷应用玩转树莓派》——第1章 初识树莓派
本节书摘来异步社区<开源硬件创客--15个酷应用玩转树莓派>一书中的第1章,作者:朱铁斌,更多章节内容可以访问云栖社区"异步社区"公众号查看 第1章 初识树莓派 开源硬 ...
- 《起跑吧,Opa》 -- 中译本 第一章 初识Opa
第一章 初识opa 本章,你将初识opa.你将学习如何安装Opa,编写opa程序以及熟悉Opa开发周期中的各个步骤. 安装opa 需要你预先从opa网站(http://opalang.org/)下载适 ...
- 第一章 初识EmguCV
第一章 初识EmguCV 1.1 EmguCV的基本介绍 1.1.1 计算机视觉.OpenCV和EmguCV 计算机视觉是一门研究如何使机器"看"的科学,更进一步的说,就是是指用摄 ...
- 5JS库-前端框架(库)-初识jQuery
前端框架(库) #初识jQuery jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 它的设计 ...
最新文章
- 当你所有的尝试告一段落
- 9i DB_FILE_MULTIBLOCK_READ_COUNT参数和extent大小的设置
- 牛客 - 牛牛的最大兴趣组(思维+数论)
- 三星Galaxy Note 10系列机模曝光:开孔全面屏实锤
- ICON素材|装饰图标设计的技巧
- V-rep学习笔记:ROSInterface
- Dell’Oro 5年期数据中心报告预测25G/100G端口速率市场快速上升
- C语言输出AB9798,c语言基础练习习题及答案.doc
- php设备巡检管理,设备巡检管理:你必须知道的4个玩法
- eas bos根据合同类别过滤自定义核算项目
- JS,等额本息,等额本金计算器
- va_list使用方法
- python清洗数据教程_数据分析入门系列教程-数据清洗
- 微信小程序开发(第一篇 开发环境的准备+demo获取微信用户信息)
- Shifting Stacks【题解】
- MySQL小白快速入门笔记
- 注意了!浏览色情网站被短信通知检讨?可能是诈骗!
- PNAS | 南农张瑞福组揭示了微生物肥料功能菌根际趋化的信号识别新机制
- 4.15Web前端笔试题
- 骗子收录查询系统源码 附教程
热门文章
- java反射 获取方法_java反射之获取类的信息方法(推荐)
- python显示目录中的文件_Python中的文件和目录操作实现
- 服务器:浅谈 Nginx 性能调优,太实用了!
- 数据库:SQLServer Stuff 函数用法笔记
- 微软官方宣布:Edge 浏览器将采用 Chromium 内核
- java方法和 IDEA Debug调试
- error while loading shared libraries: xxx.so.x 错误的原因和解决办法
- Android 中文 API (16) —— AnalogClock
- 苹果iOS 10.3.1修复博通Wi-Fi芯片重大安全漏洞
- 《JavaScript机器人编程指南》——1.2 NodeBot是什么,基本词汇还有哪些