JQuery II
jQuery事件的绑定
<body>
<button>点击1</button>
<button>点击2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你点了我一下!')
}
) # 这里简单的感受一下，下文会有详细的时间介绍
jQuery操作标签
标签内文本操作
html()：一是获取标签元素的所有内容；二是设置标签的内容，有识别标签的功能，可以是标签、dom对象、jQuery对象；
text():一是获取标签中的文本内容；二是设置文本内容
$('li:first').html('<a href="http://www.mi.com">寻寻觅觅</a>') //a标签
var a = document.createElement('a')
a.innerText = '凄凄惨惨切切'
$('li:last').html(a) //a 是dom对象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('冷冷清清')
$('li:last').html(jqobj) //jqobj是jquery对象
标签的插入
父子关系:
追加儿子 :(父).append(子) (子).appendTo(父)
头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点)
添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动；子元素可以为：
stirng | element（js对象） | jquery元素
父元素.append(子元素)
标签的删除
remove : 删除标签和事件,被删掉的对象做返回值
detach : 删除标签,保留事件,被删掉的对象做返回值
empty : 清空内容标签,自己被保留
标签的修改
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替换a
replaceAll : a.replaceAll(b) 用a替换b
标签的复制
复制 : clone
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
标签的属性操作
attr() 设置属性值、或者获取属性值
//获取值：attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')
//设置值
$('div').attr('class','box') //设置一个值
$('div').attr({name:'hahaha',class:'happy'}) //设置多个
removeAttr() 移除属性
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');
prop()
如果一个标签只有true和false两种情况,适合用prop处理
// 获取属性
$(selector).prop(属性名)
// 设置属性
$(selector).prop(属性名,属性值)
// 设置多个属性
$(selector).prop({属性名1:属性值, 属性名2:属性值,...})
$('input').attr('checked') //"checked"
$('input').prop('checked') //true
$('input').prop('cheched',false) //设置取消选中
【实例-全选、反选、取消】
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>prop实例</title>
<script src="jQuery_Library_v3.4.1.js"></script>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border width="1px">
<thead>
<th>cho</th>
<th>name</th>
<th>type</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>盖伦</td>
<td>战士</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵信</td>
<td>战士</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>女警</td>
<td>ADC</td>
</tr>
</tbody>
</table>
</body>
<script>
var $checkbox = $(":checkbox");
$("#all").click (function () {
$(":checkbox").prop('checked',true) //如果把prop换成attr只能进行一次操作，修改属性时使用prop比较方便
});
$("#reverse").click (function () {
//方式一：遍历，将每一个checkbox的状态换一下
// for (var i=0;i<$checkbox.length;i++)
// {
// if ($checkbox[i].checked) {$checkbox[i].checked = false}
// else{$checkbox[i].checked = true}
// }
//方式二：把状态相同的checkbox分组放，然后状态互换
// var $checked = $("input:checked");
// var $unchecked = $("input:not(:checked)");
// $checked.prop('checked',false);
// $unchecked.prop('checked',true)
//方式三：方式一的升级版
for (var i=0;i<$checkbox.length;i++)
{
var status = $($checkbox[i]).prop('checked');
$($checkbox[i]).prop('checked',!status)
};
});
$("#cancel").click(function () {
$(":checkbox").prop('checked',false)
})
</script>
</html>
全选/反选/取消
class类属性操作
addClass添加类名
// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个
removeClass移除类
// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')；//移除box类
$('div').removeClass();//移除全部的类
# 通过类的添加和删除，实现元素的显示与隐藏
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
【元素的显示与隐匿】
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>元素的显示与隐匿</title>
<script src="jQuery_Library_v3.4.1.js"></script>
<style>
.active{color: #ff6700}
</style>
</head>
<body>
<ul>
<li class="item">gailun</li>
<li class="item">zhaoxin</li>
<li class="item">jiawen</li>
</ul>
</body>
<script type="text/javascript">
$(function () {
$('ul li').click(function () {
// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
// 鼠标点击的对象添加active类属性，而其他兄弟移除active类属性
$(this).addClass('active').siblings('li').removeClass('active')
})
})
</script>
</html>
元素的显示与隐匿
toggleClass类的切换
// 如果存在就删除一个类；如果不存在就添加一个类
$('div').toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
val 表单控件value属性
// 获取值：用于表单控件中获取值，比如input textarea select等等
$(selector).val()
// 设置值：
$('input').val('设置了表单控件中的值')；
$(':text').val('值')
$(':password').val('值')
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
【实例】
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>value属性</title>
<script src="jQuery_Library_v3.4.1.js"></script>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="111" checked="" />女
<input type="checkbox" value="a" checked="" /> 吃饭
<input type="checkbox" value="b" checked="" /> 睡觉
<input type="checkbox" value="c" checked="" /> 打豆豆
<select name="timespan" id="timespan" class="Wdate">
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="11" />
</form>
</body>
<script>
$(function () {
//获取值
//1.获取单选框被选中的value值
var sl1 = $('input[type=radio]:checked').val();
//2.复选框被选中的value,获取的是第一个被选中的值
var sl2 = $('input[type=checkbox]:checked').val();
//3.下拉列表被选中的值
var sl3 = $('#timespan option:selected');
// 获取被选中的值
var sl3_va = sl3.val();
// 获取文本
var sl3_text = sl3.text();
//4.获取文本框的value值
var text1 = $('input[type=text]').val();
// //设置值
// //1.设置单选按钮和多选按钮被选中项
// $('input[type=radio]').val(['112']);
// $('input[type=checkbox]').val(['a','b']);
//
// //2.设置下拉列表框的选中值，必须使用select
// /*因为option只能设置单个值，当给select标签设置multiple。
// 那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
// */
// $('selected').val(['3','2']);
//
// //3.设置文本框的value值
// $('input[type=text]').val('叽叽喳喳')
})
</script>
</html>
value值
css样式
css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
滚动条距离属性
// 水平方向
$(window).scrollLeft() //获取
$(window).scrollLeft( value )//设置
// 垂直方向
$(window).scrollTop() //获取
$(window).scrollTop( value ) //设置
盒子样式属性
内容宽高 : width和height
内容+padding : innerWidth和innerHeight
内容+padding+border :outerWidth和outerHeight
内容+padding+border+margin : outerWidth(true)和outerHeight(true)
设置值:变得永远是content的值
.width( value ) //设置宽度
.height( value ) //设置高度
.innerWidth(value);//设置
.innerHeight(value); //设置
.outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
.outerWidth(value) //设置多个，调整的是“内容”的宽
.outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
.outerHeight( value ) //设置多个，调整的是“内容”的高
表单操作补充
$(':submit').click(
function () {
return false
}
)
如果返回false不提交
如果返回true提交
JQuery II的更多相关文章
- 净捡软柿子捏--jQuery 遍历方法
---------------------------------------------add()------------------------------------------ jquery. ...
- Jquery 系列（2） 选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...
- 使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- jQuery中的Sizzle引擎分析
我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...
- JS/JQuery针对不同类型元素的操作（radio、select、checkbox）
一.select下拉框 I:javascript方法 1:获取选中的值 F1: var myselect=document.getElementById("test");或者 ...
- jquery 幻灯片 左右滚动
使用jquery封装的一个幻灯片插件 写的好差 参考了别人写的 后面再重构 现在这个应该可以直接用了 主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- 网卡绑定(bonding)
就是将多块网卡绑定同一IP地址对外提供服务,可以实现高 可用或者负载均衡.当然,直接给两块网卡设置同一IP地址 是不可能的.通过bonding,虚拟一块网卡对外提供连接, 物理网卡的被修改为相同的MA ...
- 【洛谷P4172】水管局长
题目大意:给定 N 个点,M 条边的无向图,支持两种操作:动态删边和查询任意两点之间路径上边权的最大值最小是多少. 题解: 引理:对原图求最小生成树,可以保证任意两点之间的路径上边权的最大值取得最小值 ...
- 关于div的水平垂直居中
水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(positio ...
- [Javascirpt] What’s new in JavaScript (Google I/O ’19)
Private variable in class: class Counter { #count = 0; // cannot be access publicly get value () { r ...
- Codeforces 884f F. Anti-Palindromize
题 OvO http://codeforces.com/contest/884/problem/F (Educational Codeforces Round 31 - F) 884f 解 题目标签 ...
- js 密码为空显示错误
<script> var user = document.getElementById("user"); var pwd = document.getElementBy ...
- 【Python之路】特别篇--五句话搞定JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 家庭问题x
[问题描述] 有n个人,编号为1,2,……n,另外还知道存在K个关系.一个关系的表达为二元组(α,β)形式,表示α,β为同一家庭的成员. 当n,k和k个关系给出之后,求出其中共有多少个家庭.最大的家庭 ...
- linux 查看系统性能
1. 查看内存和CPU信息 cat /proc/cpuinfo cpu信息 cat /proc/meminfo |grep MemTotal 内存信息 查看物 ...
- OUC_Summer Training_ DIV2_#5
这是做的最好的一次了一共做了4道题 嘻嘻~ A - Game Outcome Time Limit:2000MS Memory Limit:262144KB 64bit IO For ...