jquery button disabled_jQuery练习
1.jQuery使用选择器获取HTML元素
例:使所有的button
元素有弹回效果
$("button").addClass("animated bounce");
2.jQuery使用addClass()方法给元素加class
只需要用jQuery的.addClass()
方法,就可以给元素加class了
首先使用$(".well")
来获取所有带有well
class的div
元素
然后使用jQuery的.addClass()
方法添加2个class:animated
和shake
注意,像使用CSS声明一样,你需要在class的名称前面添加一个.
例:将下面的代码写在document ready function
里,给所有具有text-primary
class的元素添加animated
和shake
:
$(".text-primary").addClass("animated shake");
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
{
$(".well").addClass("animated shake");
}
</script>
3.jQuery根据id属性来获取元素
首先使用$("#target3")
选择器来选择id为target3
的button
元素
注意:就像CSS声明一样,在id的名称前加上一个#
然后使用jQuery的.addClass()
方法来添加animated
和fadeOut
class
例:给id为target6
的button
元素添加fade out效果
$("#target6").addClass("animated fadeOut")
4.使用jQuery选择器操作同一元素
使用.addClass()
方法和上述三种jQuery选择器,分别给同一元素添加class:
给所有type为button
的元素添加animated
class
给所有class为.btn
的按钮添加shake
clas
给所有id为#target1
的按钮添加btn-primary
class
<script>
$(document).ready(function() {
$("button").addClass("btn-primary")
$(".btn").addClass("animated")
$("#target1").addClass("shake")
});
</script>
5.使用jQuery删除HTML元素的class
可以通过jQuery的addClass()
方法给元素添加class,同样的,也可以通过jQuery的removeClass()
方法删除元素的class
例:把button元素中的#target2上的btn-default
class移除掉
$("#target2").removeClass("btn-default");
例:把所有button
元素上的btn-default
class移除掉
$("button").removeClass("btn-default");
6.使用jQuery改变HTML元素的CSS样式
可以直接通过jQuery来改变HTML元素的CSS样式
jQuery有一个叫做.css()
的方法,能改变元素的CSS样式
以下代码显示如何将颜色改变成蓝色:
$("#target1").css("color", "blue");
这跟一般的CSS语法有点不同,因为这里的CSS属性和值是在引号内的,并且用逗号分开,而不是冒号
例:删除你的jQuery选择器,把document ready function
清空
选择target1
并将其颜色变成红色
$("#target1").css("color", "red");
7.使用jQuery设置元素不可用
可以用jQuery改变HTML元素的非CSS的属性。例如可以禁用按钮
当把按钮设置成禁用以后,按钮会变灰并且不能点击
jQuery有一个.prop()
的方法,可以来调整元素的属性
以下代码显示如何禁用所有按钮:
$("button").prop("disabled", true);
例:只让target1
按钮禁用
$("#target1").prop("disabled", true);
8.使用jQuery改变元素中的文本
jQuery不仅可以改变HTML元素开始和结束标签之间的文本,还可以改变HTML元素标记本身
jQuery有一个.html()
方法,可以在元素中添加HTML标签和文字,而元素中之前的内容都会被方法中的内容所替换掉
以下代码显示如何重写和强调标题文本(使用em
标签):
$("h3").html("<em>jQuery Playground</em>");
jQuery 还有一个类似的方法叫.text()
,它只能改变文本但不能添加标签
换句话说,这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本
例:强调id为target4
按钮里的文本
$("#target4").html("<em>#target4</em>");
9.使用jQuery删除一个HTML元素
用jQuery从页面中删除一个HTML元素
jQuery 有一个.remove()
的方法,可以彻底删除一个HTML元素
例:使用.remove()
方法来删除页面中的target4
元素
$("#target4").remove();
10.jQuery使用appendTo()移动HTML元素
把元素从一个div
里移动到另外一个div
里
jQuery有一个appendTo()
方法,可以把选中的HTML元素附加到其他元素中
例:将target4
从right-well
移动到left-well
$("#target4").appendTo("#left-well");
例:将target2
元素从left-well
移动到right-well
$("#target2").appendTo("#right-well");
11.jQuery使用clone()方法复制元素
除了移动元素,还可以将元素从一个地方复制到另一个地方
jQuery有一个clone()
方法,可以复制元素
例:把target2
从left-well
复制到right-well
$("#target2").clone().appendTo("#right-well");
上面是将两个jQuery方法合在一起使用了,这种叫方法链function chaining
,它是jQuery的一种便捷方式
例:复制target5
元素并将其附加到left-well
$("#target5").clone().appendTo("#left-well");
12.jQuery使用parent()操作父级元素
每个HTML元素都有一个parent
元素,并从中继承属性
例:jQuery Playground中的h3
元素的父元素是<div class="container-fluid">
<div class="container-fluid">
的父元素是body
jQuery有一个parent()
方法,可以允许访问选定元素的父元素
例:使用parent()
设定left-well
元素的父元素的背景色为蓝色
$("#left-well").parent().css("background-color", "blue")
例:设定#target1
元素的父元素的背景色为红色
$("#target1").parent().css("background-color", "red")
13.jQuery使用children()操作子级元素
许多HTML元素都有children
(子元素),子元素从父元素那里继承属性
例:每个HTML元素都是body
的子元素,jQuery Playground中的h3
元素是<div class="container-fluid">
的子元素
jQuery有一个children()
方法,可以访问选定元素的子元素
例:使用children()方法设置left-well
元素的子元素的文本颜色为蓝色
$("#left-well").children().css("color", "blue")
例:设置#right-well
元素的所有子元素的文本颜色为橙色
$("#right-well").children().css("color", "orange")
14.jQuery使用target:nth-child(n) CSS选择器获取子元素
jQuery用CSS选择器来获取元素,target:nth-child(n)
CSS选择器允许通过目标类或元素类型选择目标元素的所有子元素
例:给jQuery Playground中的每个井中(left well和right well)的第三个子元素添加bounce类:
$(".target:nth-child(3)").addClass("animated bounce");
例:给每个井中的第二个子元素添加bounce类,使用target
类来获取目标元素的子元素
$(".target:nth-child(2)").addClass("animated bounce");
15.jQuery使用选择器操作偶数索引元素
还可以获取所有偶数元素。
例:通过target
class获取所有奇数元素,并给它们添加class:
$(".target:odd").addClass("animated shake");
注意:jQuery里的索引是从0开始的,也就意味着会与直觉相反:
:odd
选择的是第2、4、6……个元素,因为索引是1、3、5……
例:选择所有的偶数元素(索引为0、2、4……),并给它们添加animated
和shake
class
$(".target:evev").addClass("animated shake");
16.使用jQuery修改整个页面
jQuery也可以获取body
元素
例:让整个body有淡出效果:
$("body").addClass("animated fadeOut");
例:给body
元素添加animated
和hinge
class
$("body").addClass("animated hinge");
jquery button disabled_jQuery练习相关推荐
- jQuery的noConflict()方法
noConflict() jQuery使用$符号,作为jQuery的简写 JavaScript框架包括:MooTools.Backbone.Sammy.Cappuccino.Knockout.Java ...
- jQuery常用操作
jQuery jQuery是一个轻量级的JS库,是一个被封装好的JS文件,提供了更为简便的元素操作方式,jQuery封装了DOM. 使用jQuery 引入jQuery文件 <scrtipt sr ...
- [jQuery] jQuery函数
(1)文档就绪函数 $(document).ready(function(){ --- jQuery functions go here ---- }); 为了防止文档在完全加载(就绪)之前运行 jQ ...
- 很容易学习的JQuery库 : (八) 杂项 noConflict() 方法
框架并存机制 如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架,正如已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他J ...
- jquery选择器详解
jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点,并且整理成一个强大的对象选择工具集.但要注意的是如果你的对象名里包含 "#;&,.+*~':"!^$[ ...
- 如何使用jQuery刷新页面?
如何使用jQuery刷新页面? #1楼 如果当前页面是通过POST请求加载的,则可能要使用 window.location = window.location.pathname; 代替 window. ...
- 【JavaWeb - 网页编程】三 jQuery 类库
第三章 jQuery 类库 创作日期:2021-12-21 3.1 jQuery 介绍 jQuery,顾名思义,也就是 JavaScript 和 查询(Query)它就是辅助 Java ...
- js 原生将元素插入到父元素首位,jquery和原生两种方式
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能,每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架 ...
- jQuery学习笔记总结
jQuery 注:前段时间在菜鸟教程自学了一下jQuery,记录一下笔记,如有错误,望多多指正,感谢感谢. 1.jQuery下载:https://www.jq22.com/jquery-info122 ...
最新文章
- input 的read only 和 disable的区别
- 我的jQuery动态表格插件二
- android调频收音机代码,android 收音机 FM 驱动 hal层 框架层以及应用层代码
- 数据中心成投资新宠 今年或再创历史纪录
- 二叉排序树删除子节点以及遍历
- java返回datatable_(转)在JAVA实现DataTable对象(三)——DataTable对象实现
- liunx新装tomcat之后,tomcat不能识别新发布的项目
- antd vue form表单 子组件调用父组件的方法没反应_前几天推了Vue,今天给React疯狂打call...
- 【NOI OpenJudge】【1.4】编程基础之逻辑表达式与条件分支
- 2018年全国多校算法寒假训练营练习比赛(第一场)F. 大吉大利,今晚吃鸡——跑毒篇(模拟)
- C#中Abstract和Virtual
- php gps坐标转换经纬度,GPS坐标(经纬度转换xy坐标算法)
- Meltdown Attack
- lighttpd使用
- 服务器玩cf显示文件损坏,“CF登陆游戏出现“文件缺损或破坏”的解决方案:”的解决方案...
- Matlab数学建模(七):连续模型
- 止损的意义是什么?我们为何要止损这个操作?
- 给OkHttp Client添加socks代理
- Mac电脑高手都会用的10个Mac OS实用技巧,都是干货值得收藏!
- be idle sometimes to_帮忙翻译。中文的
热门文章
- 浏览器“四巨头”首度合作 解决网页适配问题
- PyTorch 功能欠缺,Meta 推出 TorchRec 来补救?
- GitHub 热点速览 | 极客们都在玩这些 Terminal!
- Git 看这一篇就够了!
- 航拍高手、吉他十级,6500+Star 开源项目作者,后浪程序员给力!
- 10 倍高清不花!大麦端选座 SVG 渲染
- 上海正在夺回互联网 “失落的十年”
- 小米卢伟冰回应“低价误国”;国产统一操作系统 UOS 正全面适配;Vue 2.6.11 发布 | 极客头条...
- 没有学历文凭,如何成为一名优秀的 Java 程序员?
- 小米将开源进行到底!