初学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.onload=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>
初学JQuery的更多相关文章
- 初学JQuery笔记
extend()函数是jQuery的基础函数之一,作用是扩展现有的对象 <script type="text/javascript" src="jquery-1.5 ...
- 初学jquery,自己写的一个jquery幻灯片,代码有些笨拙,希望有大神可以指点一二,精简一下代码
html代码 <div class="picCon"> <div class="bigPic"> <ul> <li c ...
- 初学jQuery之jQuery选择器
今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!! 1.基本选择器(标签,ID,类,并集,交集,全局) 1.0(模板) <body> <div id=" ...
- 初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 ...
- 初学JQuery相关知识点
[简单的JQuery]注册事件的函数. $(document).ready(function(){}) [JQuery提供的函数]$.map(array,fn) 对数组array中每个元素调用fn函数 ...
- 初学jQuery之jQuery虚假购物车-------与真实数据无关
初学者用jquery来写仿真的购物车,确实有点恶心,那我们今天就把这万恶的购物车剖析一下,来看看到底有什么难的. 购物车的效果图 那我们先从复选框开始吧,废话不多说,上代码!! 带有序号的,都是一些分 ...
- 初学jQuery使用方法
jQuery引用 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></scri ...
- 初学jquery遇见的两个小问题!
<body> <div id="divtest">div的内容</div> <div id="default&quo ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
随机推荐
- LCT 维护边双 / 点双的模板
用 \(\text{LCT}\) 维护边双的做法是:加入一条非树边时,将这段树上路径合并为一个点代表这个边双,具体实现用并查集合并点,在 \(\text{Splay}\) 与 \(\text{Acce ...
- BFS(广度优先搜索遍历保存全局状态,华容道翻版做法)--08--DFS--蓝桥杯青蛙跳杯子
题目描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...
- PyQt5四大布局方式
1.绝对布局方式'''绝对布局方式,通过move的XY坐标方式来控制控件的位置'''from PyQt5.QtWidgets import *import sys,math class absolut ...
- Java学习资源 - J2SE
java.lang包教程 Java集合类详解 Java回顾之集合 Java回顾之序列化 Java回顾之反射 深入理解Java:类加载机制及反射 Java 下高效的反射工具包 ReflectASM 使用 ...
- 激活win10企业版,亲测可用,(win7步骤相同,请自行测试)
其他版本我没试过,亲们可以尝试! win7神key win7神key1:2HYJ4-V71WM-BAF6Y-G2BTH-X8QOD win7神key2:9LM54-Z3LQ1-5IRAN-T4JNI- ...
- 比较牛X的网站
数学公式编辑与分享网站:https://www.mathcha.io/editor Markdown编辑网站:https://note.youdao.com/web 在线LaTex公式编辑器:http ...
- Android 调用系统Email发送带多附件的邮件
转自:http://www.open-open.com/lib/view/open1347005126912.html 众所周知,在Android中调用其他程序进行相关处理,都是使用的Intent.当 ...
- C++11常用特性介绍——array容器
std::array是具有固定大小的数组,支持快速随机访问,不能添加或删除元素,定义于头文件<array>中. 一.概要 array是C++11新引入的容器类型,与内置数组相比,array ...
- (0)Lora及LoraWAN
Lora和LoraWAN的区别 LoRa经常被误用来描述整个LPWAN通信系统,其实Lora是Semtech拥有的专有调制格式. SX1272和SX1276 LoRa芯片使用称为chirp扩频(CSS ...
- Linux下安装 boost 库
1. 先去官网下载压缩包: https://www.boost.org/ 2. 解压 tar -zvxf boost_1_70_0.tar.gz 2. cd 进入根目录,然后执行: ./bootstr ...