jQuery的属性,事件及操作
1.属性操作
1.1 基本属性操作
$("img").attr("src") 返回文档中所有图像的src属性值
$("img").attr("src","test.jpg") 设置文档中所有图像的src属性值
$("img").removeAttr("src") 将文档中图像的src属性删除
$("input[type='checkbox']").prop("checked",true) 选中复选框
$("input[type='checkbox']").prop("checked",false) 取消复选框
$("img").removeProp("src") 删除img的src属性值
attr与prop的区别:
attr可以找到自定义的属性,prop只能找到固有的属性
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<script>
//为"select_all"类绑定点击事件
$(".select_all").click(function(){
$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签
});
//为"cancel"类绑定点击事件
$(".cancel").click(function(){
$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签
});
//为"reverse"类绑定点击事件
$(".reverse").click(function(){
//循环每一个"checkbox"标签
$(":checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反
})
});
</script>
</body>
</html>
1.2 class属性操作
$("p").addClass("test") 为p元素加上"text"类
$("p").removeClass("test") 从p元素中删除"test"类
$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类
$("p").hasClass("test") 判断有没有"test",返回一个布尔值
1.3 标签文本text/HTML的属性
$("p").html() 返回p标签的html内容
$("p").html("hello world") 设置p标签的html内容
$("p").text() 返回p标签的text内容
$("p").text("test") 设置p标签的text内容
$("input").val() 获取文本框中的值
$("input").val("test") 设置文本框中的内容
2.CSS操作
2.1 样式
$("p").css("color") 访问查看p元素的color属性
$("p").css("color","red") 设置p元素的color属性的"red"
$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要用{}字典形式)
2.2 位置
$("p").offset() 元素在当前窗口的相对偏移,object{top:100,left:100}
$("p").offset().top 元素相对窗口顶部的偏移
$("p").offset().left 元素相对窗口左侧的偏移
$("p").position() 元素相对父元素的偏移,对可见元素有效,object{top:100,left:100}
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="div1" style="width:200px;height:200px;background-color:darkblue"></div>
<script>
var val_x=0;//初始化标签到浏览器左边框的距离
var val_y=0;//初始化标签到浏览器上边框的距离
//定义当鼠标悬浮在标签上面的时候,鼠标的样式为移动
$(".div1").mouseover(function(){
$(this).css("cursor","move")
});
//为盒子绑定鼠标左键按下事件
$(".div1").mousedown(function(e){
val_x=e.clientX;//定义标签的初始x坐标
val_y=e.clientY;//定义标签的初始y坐标
var $box_x=$(".div1").offset().left;//获取盒子相对窗口左侧的偏移
var $box_y=$(".div1").offset().top;//获取盒子相对窗口顶侧的偏移
//定义鼠标移动的操作
$(document).mousemove(function(e){
var move_x=e.clientX;//获取鼠标的偏移量
var move_y=e.clientY;
//移动窗口到指定的偏移量
$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})
});
//绑定鼠标左键松开事件
$(document).mouseup(function(){
$(document).off();//关闭事件
})
});
</script>
</body>
</html>
这样可以使div盒子跟随鼠标的移动而移动
$(window).scrollTop() 获取窗口滚动条的高度
$(window).scrollLeft() 获取窗口滚动条的宽度
$(window).scrollTop("100") 获取窗口滚动条的高度为100
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<div class="box"></div>
<div id="returnTop">to top</div>
<script>
//定义窗口的滚动条
$(window).scroll(function(){
console.log($(window).scrollTop());//打印滚动条的位置
//当滚动条的位置大于200的时候
if($(window).scrollTop()>200){
$("#returnTop").show();//显示滚动条
}
else{
$("#returnTop").hide();//隐藏滚动条
}
//为返回顶部按钮绑定点击事件
$("#returnTop").click(function(){
$(window).scrollTop(0);//使窗口返回顶部
})
})
</script>
</body>
</html>
2.3 尺寸
$("p").height() 获取p元素的高度
$("p").width() 获取p元素的宽度
$("p:first").innerHeight() 获取p元素的第一个元素的内部区域的高度(不包括边框)
$("p:first").innerWidth() 获取p元素的第一个元素的内部区域宽度(不包括边框)
$("p:first").outerHeight() 获取p元素的第一个元素的外部区域的高度(默认包括边框)
$("p:first").outerWidth() 获取p元素的第一个元素的外部区域的宽度(默认包括边框)
$("p:first").outerHeight(true) 为true时包括边框
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../0814/jquery-3.2.1.js"></script>
<style>
.box{
width:200px;
height:100px;
padding:50px;
border:10px solid red;
background-color:pink;
margin:20px;
}
</style>
</head>
<body>
<div class="box">DIV</div>
<script>
console.log($(".box").height());//获取盒子的高度
console.log($(".box").width());//获取盒子的宽度
console.log($(".box").innerHeight());//获取盒子的内部区域的高度(包括填充)
console.log($(".box").innerWidth());//获取盒子的内部区域的宽度(包括填充)
console.log($(".box").outerHeight());//获取盒子的外部区域的高度(包括边框)
console.log($(".box").outerWidth());//获取盒子的外部区域的宽度(包括边框)
console.log($(".box").outerHeight(true));//获取盒子的外部区域的高度(示包括边距)
console.log($(".box").outerWidth(true));//获取盒子的外部区域的宽度(不包括边距)
</script>
</body>
</html>
显示如下:
打印结果如下:
3. 文档处理
3.1 内部插入
$("p").append("<p>p1</p>") 在p标签后面追加标签"<p>p1</p>"
$("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后面
$("p").prepend("<p>p1</p>") 在p标签前面追加标签"<p>p1</p>"
$("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前面
3.2 外部插入
$("p").after("<p>p1</p>") 在p标签的同级标签后面插入标签"<p>p1</p>"
$("p").before("<p>p1</p>") 在p标签的同级标签前面插入标签"<p>p1</p>"
$("p").insertAfter("<p>p1</p>") 把p标签插入到标签"<p>p1</p>"后面
$("p").insertBefore("<p>p1</p>") 把p标签插入到标签"<p>p1</p>"前面
3.3 替换
$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图片
$(".div1").replaceAll("p") 把div类替换成文档中所有的p标签
例子一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script>
$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签
</script>
</body>
</html>
显示如下:
例子二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script>
$(".div1").replaceAll("p");//把div类替换成文档中所有的p标签
</script>
</body>
</html>
显示如下:
3.4 删除
$("p").empty() 删除所有的p标签中的所有的子标签
$("p").remove([expr]) 删除所有的p标签以及p标签中的子标签
3.5 复制
$("p").clone() 克隆p标签
$("p").clone(true) 布尔值指定事件处理函数是否会被复制
3.6 循环
使用jQuery实现的集合循环
方式一:
$.each(Array,function(){
function_suite
})
方式二:
$(element).each(function(){
function_suite
})
例子:使用each循环进行判断
代码一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<script>
li=[11,22,33,44,55,66,77];
$.each(li,function(i,v){
if(v==33){
return;
}
console.log(v);
});
</script>
</body>
</html>
打印如下:
代码二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<script>
li=[11,22,33,44,55,66,77];
//定义循环,i为列表的索引,v为列表索引对应的值
$.each(li,function(i,v){
//当循环中的值为33时
if (v==33){
return false;
}
console.log(v);
});
</script>
</body>
</html>
打印如下:
结论:
each的参数function内如果出现return,结束当次循环,类似于continue
each的参数function内如果出现return false,结束的是整个each循环,类似break
4. 事件
4.1 事件
$("p").click() 单击事件
$("p").dbclick() 双击事件
$("p").mouseover() 当鼠标指针位于元素上方时触发事件
$("p").mousemove() 当鼠标指针在指定的元素中移动时触发事件
$("p").mouseout() 当鼠标指针从元素上移开时触发事件
$("input[type='text']").focus() 元素获得焦点时,触发focus事件
$("input[type='text']").blur() 元素失去焦点时,触发blur事件
$("input[type='text']").change() 当元素的值发生改变时触发事件
$("button").mousedown() 当按下鼠标时触发事件
$("button").mouseup() 元素上放开鼠标按键时触发事件
$(window).keydown() 当键盘或按钮被按下时触发事件
$(window).keypress() 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次事件
$(window).scroll() 当用户滚动窗口的滚动条时触发事件
$(window).resize() 当调整浏览器窗口的大小时触发事件
$(window).unload() 用户离开页面时,触发事件
$("input").keyup() 当按钮被松开时触发事件
$("input").select() 当input元素中的文本被选择时触发事件
$("form").submit() 当提交表单时触发事件
4.2 绑定方式
$(标签).事件(函数内容)
4.3 事件委托
通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件
在页面不刷新的情况下添加一行数据,行数据有操作按钮,点击并无效果,就可以通过事件委托来解决
委托方式:
$("ul").on("click","li",function(){
function_suite
})
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="box">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
<div class="item">444</div>
<div class="item">555</div>
<div class="item">666</div>
</div>
<button>ADD</button>
<script>
//为"button"按钮添加点击事件
$("button").click(function(){
$("#box").append("<div class='item'>777</div>");//在div标签后面添加一行
});
//为"box"下的"item"类添加点击事件
$("#box").on("click",".item",function(){
console.log($(".item").text());//打印"item"类的文本
})
</script>
</body>
</html>
4.4 event object
所有的事件函数都可以传入event参数方便处理事件
方式:
$("p").click(function(event){
function_suite
})
(event_object)的属性方法
event.pageX 事件发生时,鼠标距离网页左上角的水平距离
event.pageY 事件发生时,鼠标距离网页左上角的垂直距离
event.type 事件的类型
event.which 按下了哪一个键
event.data 在事件对象在绑定数据,然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation() 停止事件向上层元素冒泡
4.5 动画效果
基点
$("p").show() 显示隐藏的匹配元素
$("p");show("slow") 参数表示速度,("slow","normal","fast"),也可以设置为毫秒
$("p").hide() 隐藏显示的元素
$("p").toggle() 切换显示/隐藏
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../0814/jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg">;//定义一张图片
<hr>
<button class="hide_element">hide</button>;//定义隐藏按钮
<button class="show_element">show</button>;//定义显示按钮
<button class="toggle_element">toggle</button>;//定义切换按钮
<script>
//定义隐藏的点击事件
$(".hide_element").click(function(){
$("img").hide()
});
//定义显示的点击事件
$(".show_element").click(function(){
$("img").show()
});
//定义切换按钮的点击事件
$(".toggle_element").click(function(){
$("img").toggle()
});
</script>
</body>
</html>
用浏览器打开的效果如下:
可以看到,图片是显示的,点击"hide"按钮,图片就被隐藏起来,然后再点击"show"按钮,图片就又会被显示出来了.
另外,当图片显示的时候,点击"toggle"按钮,图片就会隐藏,而当图片是隐藏的时候,点击"toggle"按钮,图片又会显示出来.
4.6 滑动操作
$("p").slideDown("1000") 用1000毫秒的时间将段落滑下
$("p").slideUp("1000") 用1000毫秒的时间将段落滑上
$("p").slideToggle("1000") 用1000毫秒的时间将段落滑上,滑下
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../0814/jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg" style="width:500px;height:300px">
<hr>
<button class="slide_up">slide_up</button>
<button class="slide_down">slide_down</button>
<button class="toggle">toggle</button>
<script>
//对"slide_up"类绑定点击事件
$(".slide_up").click(function(){
$("img").slideUp(1000);//用1000毫秒的时间将段落收起
});
//对"slide_down"类绑定点击事件
$(".slide_down").click(function(){
$("img").slideDown(1000);//用1000毫秒的时间将段落滑下
});
//对"toggle"类绑定点击事件
$(".toggle").click(function(){
$("img").slideToggle(1000);//用1000毫秒的时间将段落滑下或者收起
});
</script>
</body>
</html>
4.7 淡入淡出
$("p").fadeIn("1000") 用1000毫秒时间将段落淡入
$("p").fadeOut("1000") 用1000毫秒时间将段落淡出
$("p").fadeToggle("1000") 用1000毫秒时间将段落淡入,淡出
$("p").fadeTo("slow",0.6) 用慢速度将段落的透明度调整到0.6
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg" style="width:500px;height:300px">
<hr>
<button class="fade_in">fadeIn</button>
<button class="fade_out">fadeOut</button>
<button class="fade_toggle">fadeToggle</button>
<button class="fade_to">fadeTo</button>
<script>
//对"fade_in"类绑定点击事件
$(".fade_in").click(function(){
$("img").fadeIn(1000);//用1000毫秒时间将段落淡入
});
//对"fade_out"类绑定点击事件
$(".fade_out").click(function(){
$("img").fadeOut(1000);//用1000毫秒时间将段落淡出
});
//对"fade_toggle"类绑定点击事件
$(".fade_toggle").click(function(){
$("img").fadeToggle(1000);//用1000毫秒时间将段落淡入或淡出
});
//对"fade_to"类绑定点击事件
$(".fade_to").click(function(){
$("img").fadeTo("slow",0.6);//用慢速度将图片的透明度调整到0.6
});
</script>
</body>
</html>
4.8 页面载入
页面载入,也就是当页面载入成功后立即运行的函数事件
$(document).ready(function(){
function_suite
})
也可以简写为:
$(function(){
function_suite
})jQuery的属性,事件及操作的更多相关文章
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- JQuery常用属性操作，动画，事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- JQuery第三天——CSS操作与JQuery事件
JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...
随机推荐
- python中List添加、删除元素的几种方法
一.python中List添加元素的几种方法 List 是 Python 中常用的数据类型,它一个有序集合,即其中的元素始终保持着初始时的定义的顺序(除非你对它们进行排序或其他修改操作).在Pytho ...
- sqlmap完成简单的sql注入
扫描目标站点,是否存在注入 --users获取用户名 --dump --tables探测表和数据库信息 跑出来的字段 admin --dump -T admin -C admin,password暴库 ...
- 学习笔记-echarts自定义背景图片
困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...
- hdu_4497GCD and LCM(合数分解)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4497 GCD and LCM Time Limit: 2000/1000 MS (Java/Other ...
- web 服务器、PHP、数据库、浏览器是如何实现动态网站的
发送请求:浏览器根据用户输入的域名,运用DNS缓存或请求本地DNS服务器解析等获得对应IP地址,使用HTTP协议发送请求报文(含请求内容.浏览器信息.本地缓存.cookie等) 返回数据:web服务器 ...
- 解决JSONObject.fromObject数字为null时被转换为0
在使用JSONObject.fromObject的时候会遇到一种情况就是当对象的某一个Double型或Integer型的属性为空的时候,转JSON的时候会变成0.当一个布尔型的属性为空的时候,转JSO ...
- [国嵌笔记][012][GCC程序编译]
GCC特点 GCC(GUN C Compiler)是GUN推出的功能强大.性能优越的多平台编译器.其执行效率与一般编译器相比平均效率要高20%~30%. GCC基本用法 gcc [options] f ...
- web框架前言与学生数据库系统（附1.0源码）
对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def f1(request): ""&quo ...
- Arrays类详解
数组是数据结构中最简单的一种类型.在平常的使用上也比较多见.今天就来总结一下数组在使用过程中的一些心得 1.java中包装数组的一些基本用法的抽象类 java.util.Arrays.这个类中包含操 ...
- thinkphp无法加载控制器:Admin
在使用thinkphp时,通过某入口文件访问其他非默认的模块(比如Admin模块),出现报错: 无法加载控制器:Admin 原因:入口文件(比如index.php)中定义了绑定某个具体的模块 如:de ...