});

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

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

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

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

使用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

把target2从left-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

开始学习jQuery和准备工作相关推荐

从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
学习jQuery的on事件
开发asp.net mvc程序,多少是离不开jQuery客户程序.今天Insus.NET学习jQuery的一个on事件驱动. 先在网页视图放一个图片铵钮,用户可以使用mouse对这图片时行over,o ...
学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...
从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
学习jQuery顺便学习下CSS选择器：奇偶匹配nth-child(even)
原文转自:http://www.cnblogs.com/Elgin/archive/2010/05/24/1742563.html 首先解释一下两个单词,一个是odd,一个是even,这两个单词表示的 ...
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (九) jQuery工具函数
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (八) 插播:jQuery实施方案
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

开始学习jQuery和准备工作