jq相关操作
1事件:
<div class="ele">123</div>
box.onclick = function(ev){
ev:系统传入的事件对象
ele.innerText;
}
鼠标事件=>clientX,clientY
键盘事件=>ctrlkey,keyCode
鼠标事件:
onmouse enter|move|down|up|leave
onclick|dblclick oncontextmenu
键盘事件:onkeydown|up
定时器:
setInterval|setTimeout
setInterval(fn,1000)
clearInterval|clearTimeout
jq
jQuery是一个高效,精简并且功能丰富的javascript工具库
$是jQuery的别名
<script src = "jquery-3.3.1.js"></script>
<script>
//注意,一定在引入jQuery之后,再使用jQuery提供各种操作
选择器
①获取满足条件的所有页面元素jq对象
$("css3选择器语法");
②拿到指定索引的页面元素jq对象
$("css3选择器语法").eq(index);
③拿到指定索引的页面元素js对象(jq数组放的都是js对象)
$("css3选择器语法")[index];
$("css3选择器语法").get(index);
④js对象转jq对象
$(js对象)
文档加载
问题:
在标签建立前的jq语法中使用该标签
解决方法:
让jq语法在页面加载后再执行
文档加载方法
1.js
window.onload = function(){
}
2.jq
$(document).ready(function(){});
简写:$(function(){});
onload结构和资源都加载完毕
只能绑定一个事件方法
ready 结构加载完毕
可以绑定多个事件方法
页面加载的方法
1.可以保证页面结构一定加载完毕
2.可以保证数据的局部化(不会被外界直接读写)
注:导入jq一定要在使用jq之前
<script src="js/jquery-3.3.1.js">
</script>
<script>
$(function(){
$(".top").css("background-color","cyan");}
);
</script>
jq操作元素对象
<script>
// <!--更改文本-->
// 链式操作:几乎每一个方法都具有返回值(元素对象)
// $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");
<!--更改样式-->
// $(".top").css("width",function () {
// width要加双引号,this是js对象,$(this)将js对象转换为jq对象
// 可以使用height(),括号不能丢,语句后的分号不能丢
// return $(this).height()*2;
// });
// $(".top").height("400px").css("background-color","cyan");
// $(".top li").css({
// 属性后的值要加双引号
// color:"yellow",
// fontSize:"14px",
// float:"left"
// });
// console.log($(".top"));
// console.log($)
// console.log(jQuery)
</script>
// 修改类名
// $(".top").addClass("bot");
// console.log($(".top").addClass().removeClass("bot"))
// 增加全局属性
// $("img").attr("src","http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg");
// 删除全局属性
// $("img").removeAttr("src");
// 获取全局属性
// console.log($("img").attr("xzh"));
jq获取盒子信息
显示信息
#盒子信息:
#宽高(content)|内边距(padding)|边框(border)|外边距(margin)
.top {
margin: 5px;
padding: 10px;
border: 20px solid green;
width:200px;
height: 300px;
background-color: orange;
list-style: none;
}
// var res = $(".top").css("padding");
// console.log(res);//10px 带单位
// var res = $(".top").width();
// console.log(res);//width就是content的宽 200不带单位
// var res = $(".top").innerWidth(); // 220 innerWidth w要大写,等于width加上padding宽
// console.log(res);
// var res = $(".top").outerWidth();//260 outerWidth 等于width 加上 padding 加上 border宽
// console.log(res);
// var res = $(".top").outerWidth(true);//270 加上true的话,还要再加上margin宽,
// console.log(res);
位置信息
.nav{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:20px;
left:20px;
margin: 10px 10px;
}
//相对窗口偏移:算margin产生的距离
$(function () {
var res = $(".nav").offset();//{top: 30, left: 30}//相对于窗口的偏移,要算margin的值
console.log(res);
});
//绝对定位偏移(top,left):不算margin产生的距离
$(function () {
var res = $(".nav").position();//{top: 20, left: 20}不算margin的值
console.log(res);
})
position().top
offset().top
jq操作元素对象
<!--更改文本-->
// 链式操作:几乎每一个方法都具有返回值(元素对象)
// $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");
<!--更改样式-->
// $(".top").css("width",function () {
// width要加双引号,this是js对象,$(this)将js对象转换为jq对象
// 可以使用height(),括号不能丢,语句后的分号不能丢
// return $(this).height()*2;
// });
// $(".top").height("400px").css("background-color","cyan");
// $(".top li").css({
// 属性后的值要加双引号
// color:"yellow",
// fontSize:"14px",
// float:"left"
// });
事件
$(".box").on("click",function(){
alert($(this).text())
})
var d = "AAA"
#四个参数,第一个事件,第二个指派,第三个参数,第四个功能,
$(".box").on("click","span",{aaa:d},function(ev)){
console.log(ev);
console.log(ev.data.aaa);#参数保存在data属性中
console.log(ev.clientX);
}
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<span>"哈哈"</span>
<a >"呵呵"</a>
</div>
</body>
<script>
var b = "aaa";
$(".box").on("click","a",{a:b},function (ev) {
console.log(ev.clientX);
console.log(ev.data.a);
})
</script>
</html>
取消默认事件;
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("div").on("contextmenu",function (ev) {
ev.preventDefault()//第二种方法
var bg = $(this).css("background-color");
alert(bg);
// return false;第一种方法
})
父子都有点击方法时,取消父级方法
$(".sup,.sub").on("click",function (ev) {
ev.stopPropagation();//阻止事件的传播,冒泡
var cname = this.className;
alert(cname);
})
jq相关操作的更多相关文章
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
- 从零自学Hadoop(20):HBase数据模型相关操作上
阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 从零自学Hadoop(21):HBase数据模型相关操作下
阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 理解CSV文件以及ABAP中的相关操作
在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...
- Liunx下的有关于tomcat的相关操作 && Liunx 常用指令
先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...
- pip的相关操作
>Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...
- python操作mysql数据库的相关操作实例
python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...
- php对二维数组进行相关操作(排序、转换、去空白等)
php对二维数组进行相关操作(排序.转换.去空白等) 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-11-04 这篇文章主要介绍了php对二维数组进行相关操作,包括php对 ...
- SQL语言和DML相关操作以及相应的运算符
SQL 1.结构化查询语言 2.特点 a.第四代编程语言,更接近自然语言 b必须有数据库系统解释执行 c.对象名,关键字不区分大小写 d.字符串必须要用单引号引起来,不能用双引号 e.每条语句最后用分 ...
随机推荐
- UWP 版本号
一:版本号 个人开发者对于版本号的命名相对随便一点,如果是大公司的话,命名则要规范一点.以开发UWP为例 在创建包的时候,开发者可以自定义版本号或者点击自动增加. 二:对应上图中的四个格子中的数字 第 ...
- EM算法(徐亦达)笔记
- E.华华给月月准备礼物
链接:https://ac.nowcoder.com/acm/contest/392/E 题意: 二月中旬虐狗节前夕,华华决定给月月准备一份礼物.为了搭建礼物的底座,华华需要若干根同样长的木棍.华华手 ...
- Count on a tree II SPOJ - COT2 && bzoj1086 王室联邦 && bzoj2589
https://cn.vjudge.net/problem/SPOJ-COT2 这个是树上莫队模版啊.. 树上莫队有两种,第一种就是括号序莫队 设节点i在括号序中首次出现位置为pl[i] 那么路径(i ...
- C51存储的优化
我们知道51单片机只有128BYTE的RAM, 有的增强型有XRAM,此时编程时就要注意,否则就有可能超出空间 1 对于各模块的全局变量.静态变量.全局枚举型常量,静态枚举型常量.个别操作存储(如外部 ...
- 牛客网Java刷题知识点之什么是死锁、死锁产生的4个必要条件、死锁的解除与预防
不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?query=&asc=true&order=&page=16 ...
- ActiveMQ与RocketMQ对比
ActiveMQ RabbitMQ RocketMq ZeroMQ 关注度 高 高 中 中 成熟度 成熟 成熟 比较成熟 不成熟 所属社区/公司 Apache MozillaPublic ...
- linux 的iptables失效解决方法
1.首先查看iptables配置文件:cat /etc/sysconfig/iptables 2.然后查看 iptables 配置文件是否生效:iptables -L,结果如下,很显然和上面的配置 ...
- SQL注入原理与解决方法代码示例
一.什么是sql注入? 1.什么是sql注入呢? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网 ...
- leetcode140 Word Break II
思路: 直接爆搜会超时,需要使用记忆化搜索.使用map把已经计算过的情况记录下来,避免重复计算. 实现: class Solution { public: vector<string> w ...