开始学习jQuery和准备工作

<script>
$(document).ready(function(){

});

首先,在页面顶部添加一行script元素,然后在下一行写上结束符。

浏览器会运行script里所有的Javascript,包括jQuery。

在你的script元素里,添加这段代码:$(document).ready(function() {到你的script中,然后在下一行用});结束它。


使用jQuery选择器操作同一元素

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");//首选项
});
</script>

使用jQuery改变HTML元素的CSS样式

$("#target1").css("color", "blue");

使用jQuery设置元素不可用

$("button").prop("disabled", true);

使用jQuery改变元素中的文本

$("h3").html("<em>jQuery Playground</em>");

使用jQuery删除一个HTML元素

 $("#target4").remove();

jQuery使用appendTo()移动HTML元素

$("#target4").appendTo("#left-well");

jQuery使用clone()方法复制元素

$("#target2").clone().appendTo("#right-well");//两个jQuery方法合在一起使用了?这种叫方法链function chaining

target2left-well复制到right-well

jQuery使用parent()操作父级元素

$("#left-well").parent().css("background-color", "blue")

jQuery使用children()操作子级元素

$("#left-well").children().css("color", "blue")

 

jQuery使用target:nth-child(n) CSS选择器获取子元素

$(".target:nth-child(3)").addClass("animated bounce");

//以下代码显示如何给jQuery Playground中的每个井中(left well和right well)的第三个子元素添加bounce类:

jQuery使用选择器操作偶数索引元素

$(".target:even").addClass("animated shake"); //偶数

$(".target:odd").addClass("animated shake");//奇数

使用jQuery修改整个页面

$("body").addClass("animated fadeOut");//整个body有淡出效果

$("body").addClass("animated hinge");//一左上角为圆心 顺时针晃动 下坠淡出

 

转载于:https://www.cnblogs.com/chendi618/p/11012975.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274983.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

粉红噪音_粉红的常绿力量

粉红噪音I use Instagram. But I don’t use Instagram in the way that my daughters, who are 21 and 14, use Instagram. More to the point, Instagram doesn’t use me in quite the same way it uses my daughters.我使用Instagram。 但是&#xff0c;我不会像21岁和14岁…

Sql Server 中存储过程的output return的区别

看http://zxianf.blog.163.com/blog/static/301207012009114104124969/中片关于Sql Server中存储过程output和return值的区别 在里面有讲解&#xff0c;我在自己本机中测试的结果如下&#xff0c; 1&#xff1a;ReturnValue只能返回0,1,-1这样的数据&#xff0c;局限性很大 &am…

1个月增长15000 star,zx 库写shell脚本真不错~

大家好&#xff0c;我是若川。持续组织了5个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。今天来讨论一个牛逼…

灰色边框阴影_50种暗模式灰色阴影

灰色边框阴影If you’re an avid dark mode user like me, you’ll know that dark mode isn’t just about white text on black backgrounds. In a single app, a handful of shades of gray give the app some depth. And across various apps, the spectrum of gray become…

Android源代码下载

为什么80%的码农都做不了架构师&#xff1f;>>> Android代码使用git管理, 所以关于Android源码下载一般来说要安装git. 本文是讲述只使用Eclipse完成Android源码下载和关联. 下载Eclipse,目前最新版本是Juno,自带了EGit插件-->Eclipse Git插件 那么可以使用EGit…

关于nginx调转404错误页面

在server{}模块添加如下&#xff1a; error_page 404 /404.html; location /404.html { root /var/www/html/sina/; #“404目录地址” }转载于:https://www.cnblogs.com/alang85/archive/2012/03/01/404_error.html

尤雨溪:Vue 3 将成为新的默认版本

过完年&#xff0c;大年初七&#xff0c;Vue3 将成为默认版本&#xff0c;这时感觉我之前写的几篇文章都可以抽空更新一版了。尤雨溪推荐神器 ni &#xff0c;能替代 npm/yarn/pnpm &#xff1f;简单好用&#xff01;源码揭秘&#xff01;Vue 3.2 发布了&#xff0c;那尤雨溪是…

shell编程系列20--文本处理三剑客之awk常用选项

shell编程系列20--文本处理三剑客之awk常用选项awk选项总结选项 解释 -v 参数传递 -f 指定脚本文件 -F 指定分隔符 -V 查看awk的版本号[rootlocalhost shell]# awk -v num2"$num1" -v var1"$var" BEGIN{print num2,var…

v-charts加载动画_加载动画-用户体验写作练习

v-charts加载动画Many new UX writers often struggle to find the balance between creativity and clarity. You can’t make everything fun/exciting/interesting as it can have an adverse effect on usability. But there are times when you can add a bit of flair.许…

linux 常用命令收集

关机&#xff1a;poweroff&#xff0c;shutdown -h now&#xff0c;init 0重启&#xff1a;reboot&#xff0c;shutdown -r now&#xff0c;init 6 关闭x-window&#xff1a;init 3启动x-window&#xff1a;init 5&#xff0c;start x1.终止命令&#xff1a;ctrlc 2.结束输入…

34岁回顾人生,也怕中年危机!

大家好&#xff0c;我是若川。持续组织了5个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。最近发生一件令人感…

蛋花花APP,APP开发这几点你要注意了

蛋花花君又来了&#xff0c;这次蛋花花君为大家分享的是APP开发过程中需要注意的几点。 1、用户体验 程序猿蛋花花觉得&#xff0c;APP开发是为客户来开发的&#xff0c;而不单单是为了老板&#xff0c;毕竟真正使用的是广大用户。APP的设计应该从用户的角度出发&#xff0c;提…

svg动画制作_制作第一个SVG动画

svg动画制作Story of a designer trying to code animations instead of asking a dev to figure it out.一位设计师尝试编写动画代码而不是要求开发人员弄清楚动画的故事。 编码动画是Webdesign的未来 (Coded animations are the future of Webdesign) Because we have acces…

网站前端设计,从960框架开始

一个网站进入到前端设计阶段&#xff0c;第一步肯定是为全站搭建一个统一的&#xff0c;基础的HTML模型&#xff0c;在这里推荐一下我刚学习的960框架。960是一个CSS框架&#xff0c;你肯定在想&#xff0c;这个世界肯定是疯了&#xff0c;连CSS都有框架了吗&#xff0c;没错&a…

60+ 实用 React 工具库,助力你高效开发!

大家好&#xff0c;我是若川。持续组织了5个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。最近看到一些实用的…

2012年12月第二个周末

2019独角兽企业重金招聘Python工程师标准>>> 这周&#xff0c;装上了windows版的 Linux版的oracle 熟悉了下SQL*PLUS的编程规则&#xff0c;还有常用的linux命令 看了一本《简爱》 正在看oracle 转载于:https://my.oschina.net/u/204616/blog/545513

『C#基础』调用CMD的一个小工具

由于经常要使用CMD的一些命令&#xff0c;比如查看IP&#xff0c;Ping一个网址之类的。于是就写了一个调用CMD.exe的小工具。 主要就是实现这样一个事情&#xff1a;调用CMD.exe然后传给它我想要执行的命令&#xff0c;最后获取结果。 界面&#xff1a; 代码&#xff1a; 主要执…

小姐姐:如何参与大型开源项目-Taro 共建

大家好&#xff0c;我是若川。持续组织了5个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。“本文来自前端程序…

JavaWeb学习总结(十七)——JSP中的九个内置对象

2019独角兽企业重金招聘Python工程师标准>>> 一、JSP运行原理 每个JSP 页面在第一次被访问时&#xff0c;WEB容器都会把请求交给JSP引擎&#xff08;即一个Java程序&#xff09;去处理。JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet) &#xff0c;然…

C#网络编程(异步传输字符串) - Part.3[转自JimmyZhang博客]

源码下载&#xff1a;http://www.tracefact.net/SourceCode/Network-Part3.rar C#网络编程(异步传输字符串) - Part.3 这篇文章我们将前进一大步&#xff0c;使用异步的方式来对服务端编程&#xff0c;以使它成为一个真正意义上的服务器&#xff1a;可以为多个客户端的多次请求…