2017.4.9 JQuery学习续写

1.第一步:写下这个函数

<script>
$(document).ready(function() {
                });
</script>

2.第二步:所有jQuery方法都是由$开始的,jQuery通过选择器来选择一个元素的,然后操作元素做些改变

要让所有的按钮做弹回效果,只要把这段代码写在document ready function里面就可以了

$("button").addClass("animated bounce");

3.只需要用jQuery的.addClass()方法,就可以给元素加class了

使用$(".well")来获取所有class为welldiv元素,使用jQuery的.addClass()方法添加2个class:animatedshake

$(".well").addClass("animated shake");

4.还可以根据id属性来获取元素

首先用$("#target3")来选择id为target3button元素。

然后使用jQuery的.addClass()方法来添加 animatedfadeOutclass

$("#target6").addClass("animated fadeOut")

5.现在你已经了解了3种选择器:元素选择器:$("button")、class选择器:$(".btn")、id选择器:$("#target1")

代码:

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

6.你可以通过jQuery的addClass()方法给元素添加class,也可以通过jQueryremoveClass()方法去掉元素上的class。

像下面这样:

$("#target2").removeClass("btn-default");

7.我们可以通过jQuery来改变HTML元素的CSS样式。jQuery有一个叫做.css()的方法能让你改变元素的CSS样式。

我们是这样来把颜色改变成蓝色的:

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

8.你还可以用jQuery改变除了CSS以外的属性。比如,你可以让按钮变不可选。当你把按钮设置成不可选以后,这会让按钮变灰并且不能点击。

jQuery有一个.prop()的方法让你来调整元素的属性.

我们是这样来让按钮不可选的:

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

9.jQuery不仅可以改变元素开始标记和结束标记间的文本,甚至可以改变元素标记本身。

jQuery的.html()方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。

我们是通过em[emphasize]标签来重写和强调标题文本的:

$("h4").html("<em>#target4</em>");

10.现在让我们用jQuery来移除页面上的HTML元素吧.jQuery 有一个.remove() 的方法可以移除HTML元素

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

11.现在让我们尝试把元素从一个div里移到另外一个div里。

jQuery有一个appendTo()方法可以把选中的元素加到其他元素中。

你想让target4从我们的从right-well移到left-well,我们可以这样使用:

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

12.除了移动元素,你还可以拷贝元素。简单理解:移动元素就是剪切,拷贝元素就是复制。

jQuery的clone()方法可以拷贝元素。

比如,如果我想把target2left-well拷贝到right-well,我们可以这样写:

$("#target2").clone().appendTo("#right-well");

13.每个HTML元素根据继承属性都有父parent元素。

jQuery有一个方法叫parent(),它允许你访问指定元素的父元素。

举个例子:让left-well 元素的父元素parent()的背景色变成红色。

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

14.许多HTML元素都有children(子元素),每个子元素都从父元素那里继承了一些属性。

举个例子,每个HTML元素都是 body 的子元素, 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。

jQuery有一个方法叫children(),它允许你访问指定元素的子元素。

举个例子:让left-well 元素的子元素children()的文本颜色变成蓝色。

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

15.jQuery 用CSS选择器来选取元素,target:nth-child(n) CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。

示例:你可以给目标元素的第三个子元素添加bounce class。

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

16.示例:获取class为target且索引为奇数的所有元素,并给他们添加class。

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

记住,jQuery里的索引是从0开始的,也就是说::odd 选择第2、4、6个元素,因为target#2(索引为1),target#4(索引为3),target6(索引为5)。

获取所有偶数操作:

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

17.我们让整个body都有淡出效果(fadeOut): $("body").addClass("animated fadeOut");

$("body").addClass("animated hinge");

时间: 2024-11-05 18:50:18

2017.4.9 JQuery学习续写的相关文章

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

很不错的jQuery学习资料和实例

这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程,  如果你对jQuery感兴趣, 也可以查看帕兰写的文章: 37个更加出色的jQuery插件 45个新鲜出炉的jQuery插件 50多个强大的jQuery插件应用实例 John Resig John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozill

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为"移动",使用"移动"还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师,但我不认识所有学生,只认识上学期教过的几位同学.比如小明.我们再用一小串代码来作解释: <body> <span id="ming">我是小明</span> <span>我坐在小明后面,我叫李四</sp

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

第二十四篇 jQuery 学习6 删除元素

jQuery 学习6 删除元素 上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 以上引用w3c教程 为了同学们更好的扩展,老师就不在上节课的基础上模拟删除,而是写出删除的功能代码和注意事项,同学们就自己多尝试,来瞧瞧代码先: <!DOCTYPE html> <html>