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相关操作的更多相关文章

  1. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  2. 从零自学Hadoop(20):HBase数据模型相关操作上

    阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  3. 从零自学Hadoop(21):HBase数据模型相关操作下

    阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  4. 理解CSV文件以及ABAP中的相关操作

    在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...

  5. Liunx下的有关于tomcat的相关操作 && Liunx 常用指令

    先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...

  6. pip的相关操作

    >Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...

  7. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  8. php对二维数组进行相关操作(排序、转换、去空白等)

    php对二维数组进行相关操作(排序.转换.去空白等) 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-11-04   这篇文章主要介绍了php对二维数组进行相关操作,包括php对 ...

  9. SQL语言和DML相关操作以及相应的运算符

    SQL 1.结构化查询语言 2.特点 a.第四代编程语言,更接近自然语言 b必须有数据库系统解释执行 c.对象名,关键字不区分大小写 d.字符串必须要用单引号引起来,不能用双引号 e.每条语句最后用分 ...

随机推荐

  1. UWP 版本号

    一:版本号 个人开发者对于版本号的命名相对随便一点,如果是大公司的话,命名则要规范一点.以开发UWP为例 在创建包的时候,开发者可以自定义版本号或者点击自动增加. 二:对应上图中的四个格子中的数字 第 ...

  2. EM算法(徐亦达)笔记

  3. E.华华给月月准备礼物

    链接:https://ac.nowcoder.com/acm/contest/392/E 题意: 二月中旬虐狗节前夕,华华决定给月月准备一份礼物.为了搭建礼物的底座,华华需要若干根同样长的木棍.华华手 ...

  4. Count on a tree II SPOJ - COT2 && bzoj1086 王室联邦 && bzoj2589

    https://cn.vjudge.net/problem/SPOJ-COT2 这个是树上莫队模版啊.. 树上莫队有两种,第一种就是括号序莫队 设节点i在括号序中首次出现位置为pl[i] 那么路径(i ...

  5. C51存储的优化

    我们知道51单片机只有128BYTE的RAM, 有的增强型有XRAM,此时编程时就要注意,否则就有可能超出空间 1 对于各模块的全局变量.静态变量.全局枚举型常量,静态枚举型常量.个别操作存储(如外部 ...

  6. 牛客网Java刷题知识点之什么是死锁、死锁产生的4个必要条件、死锁的解除与预防

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?query=&asc=true&order=&page=16 ...

  7. ActiveMQ与RocketMQ对比

      ActiveMQ RabbitMQ RocketMq ZeroMQ 关注度   高 高 中 中 成熟度   成熟 成熟 比较成熟 不成熟 所属社区/公司 Apache  MozillaPublic ...

  8. linux 的iptables失效解决方法

    1.首先查看iptables配置文件:cat  /etc/sysconfig/iptables 2.然后查看 iptables 配置文件是否生效:iptables  -L,结果如下,很显然和上面的配置 ...

  9. SQL注入原理与解决方法代码示例

    一.什么是sql注入? 1.什么是sql注入呢? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网 ...

  10. leetcode140 Word Break II

    思路: 直接爆搜会超时,需要使用记忆化搜索.使用map把已经计算过的情况记录下来,避免重复计算. 实现: class Solution { public: vector<string> w ...