`

jQuery-动手篇

阅读更多
<body>
一.基本选择器
1.ID选择器:$("#temp").addClass("bgred");
2.类选择器:$(".temp").addClass("bgred");
3.合选择器:$("#temp,#test").addClass("bgred");
二.层次选择器:
1.后代选择器:$("form label").addClass("bgred");//只要label的上级有form则会应用上样式
2.孩子选择器:$("form > label").addClass("bgred");//当label的父标签是form则会应用上样式
3.兄弟选择器:$("form + label").addClass("bgred");//当form元素和label元素互为兄弟则会label元素应用上样式
4.兄弟链选择器(自己起的名字):$("form ~ label").addClass("bgred");//所有与form元素同级的label元素则会应用上样式
二.滤镜选择器:
1.位置控制滤镜
$("#dataTable tr:first").addClass("bgred");
$("#dataTable tr:last").addClass("bggreen");
$("#dataTable tr:odd").addClass("bggreen");
$("#dataTable tr:even").addClass("bggreen");
$("#dataTable tr:eq(1)").addClass("bgred");
$("#dataTable td:empty").addClass("bgred");
$("#dataTable td:parent").addClass("bgred");
$("#dataTable tr:hidden").show().addClass("bgred");
$("#dataTable tr:visible").addClass("bgred");
$("#dataTable tr:visible").hide();
2.内容控制滤镜
$("div.temp:contains('博客')").addClass("bgred");
$("div.temp:has(p)").addClass("bgred");//针对标签
$("div.temp:not(.withp)").addClass("bgred");
三.表单选择器:
1.内容滤镜
$("#loginForm :text").addClass("bgred");
$("#loginForm :password").addClass("bgred");
2.功能滤镜
$("#loginForm input:enabled").addClass("bggreen");
$("#loginForm select option:selected").addClass("bggreen");
3.属性滤镜
$("#loginForm input[class][name=nickname]").addClass("bgred");


四.函数
alert($("form input").attr("name"));//获取第一个匹配的元素
$("form input").attr("value","茶叶");//修改所有有value这个属性的元素的value值为茶叶
$("form input").attr("value",function(){return this.name});

$("form input").removeAttribute("value");
$("form input").removeClass("test");
$("form input").toggleClass("bgred");//交替样式

alert($("#content").css("background-color"));
$("#content").css("background-color","green");

$("#content").css(
		{
			"background-color":"green",
			"color":"gray"
		}
);		

alert($("#temp").html());
$("#temp").html("<h1>大乡里</h1>");

alert($("#temp").text());
$("#temp").text("<h1>大乡里</h1>");

$("#temp p").filter(".lovecn").addClass("bgred");

$("#temp p").filter(
		function(){
			return $(this).hasClass("lovecn");
		}).addClass("bggreen");
		
$("#btnTest").click(function(event) {
	$("#temp p").each(function() {
		if (!$(this).hasClass("lovecn")) {
			$(this).addClass("bggreen");
		}
	})
});

//对比:
$("input").filter(".lovecn").addClass("bgred");
$("form").find(".lovecn").addClass("bgred");

$(document).ready(function() {
	$("#dataTable tr:odd").addClass("bgred");
	$("#dataTable tr:even").addClass("bggreen");

	$("#dataTable tr").mouseover(function() {
		$(this).addClass("bgwhite");
	});
	$("#dataTable tr").mouseout(function() {
		$(this).removeClass("bgwhite");
	});
});

$("#content .lovecn").next().end().addClass("bgred");//灾难恢复,回滚
$("#content .lovecn").next().andSelf().addClass("bgred");//把之前获得的元素加入next中获得的元素
</body>

 

分享到:
评论

相关推荐

    jQuery---标签式导航菜单.

    本篇文章将深入探讨如何使用jQuery实现一个效果酷炫的标签式导航菜单。 ### 1. jQuery基础 首先,我们需要了解jQuery库的基本用法。jQuery 是一个JavaScript库,简化了DOM操作、事件处理和动画。要使用jQuery,你...

    jquery-ui-1.8.17

    在本篇文章中,我们将深入探讨jQuery UI 1.8.17版本的核心特性和实际应用场景,帮助开发者更好地理解和利用这个强大的工具。 一、jQuery UI 的核心组件 jQuery UI 包含了多个用户界面元素和交互功能,如: 1. **...

    jQuery教程学习

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。...记得,实践是检验真理的唯一标准,理论学习之余,多动手实践,才能真正掌握jQuery的魅力。

    jquery 入门篇

    **jQuery 入门篇** jQuery 是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript编程,使得...记得实践是检验真理的唯一标准,多动手编写代码,结合提供的学习资料,相信你很快就能熟练运用jQuery。

    jQuery入门篇.

    **jQuery入门篇** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个入门篇将帮助初学者快速理解jQuery的核心概念和功能,以便在网页开发中更高效地操作DOM...

    从零开始学jquery

    【从零开始学jQuery】这个教程旨在帮助初学者全面...通过阅读教程、动手实验和查阅API文档,开发者可以逐步建立起对jQuery的深刻理解和应用能力。在这个过程中,不断练习和解决问题将使你成为一个熟练的jQuery开发者。

    jquery攻略

    - **动手实践**:理论结合实践是学习编程的最佳方式之一。在学习每个知识点后,尝试自己编写代码来加深理解。 - **查阅文档**:官方文档是解决具体问题的有效途径。当遇到难题时,不要犹豫查阅jQuery的官方文档或...

    jquery文档预览功能插件

    本篇文章将深入讲解“jQuery文档预览功能插件”,并结合示例代码,帮助开发者快速理解并应用。 ### 1. 插件介绍 jQuery Zoho Viewer是一款强大的文档预览插件,它允许用户在浏览器内直接预览各种类型的文档,包括...

    【Jquery经典特效2】jQuery个人简介特效页面代码

    本篇文章将深入探讨如何利用jQuery实现一个具有特色的个人简介特效页面。 一、jQuery库的引入 在HTML文档中,我们首先需要引入jQuery库。这通常通过在`&lt;head&gt;`标签内添加一个`&lt;script&gt;`标签来完成,其src属性指向...

    Jquery 创建流程图

    本篇文章将深入探讨如何使用jsPlumb库,一个专为jQuery设计的工具,来创建流程图。 **一、jsPlumb简介** jsPlumb是一个轻量级的JavaScript库,它专注于连接元素,提供了一系列用于构建流程图和网络图表的功能。...

    jquery 1.8完整包

    本篇将聚焦于jQuery 1.8版本,深入探讨其核心功能,并通过实际案例展现其在Web开发中的广泛应用。 一、jQuery简介 jQuery由John Resig于2006年创建,其设计宗旨是"Write Less, Do More",旨在减少JavaScript代码量...

    jQuery 第一个demo

    本篇将深入解析“jQuery第一个Demo”,帮助初学者快速入门jQuery的基本用法。 首先,我们来看标题:“jQuery第一个demo”。这通常指的是一个简单的示例,用于展示如何在网页中引入jQuery库并执行基本操作。在这个...

    jQuery浮动菜单实现

    本篇文章将详细探讨如何使用jQuery来实现一个浮动菜单,并在鼠标离开时自动关闭的功能。 首先,我们需要了解jQuery的基本概念。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    JQuery第七章上机练习和课后作业

    通过研究这些实例,加深对jQuery的理解,并尝试自己动手实现类似的功能,将有助于巩固所学知识。同时,鼓励与他人交流讨论,共同进步,这不仅是提升编程技能,也是培养团队协作能力的好方法。 总之,jQuery第七章的...

    Jquery区域拖拽

    本篇文章将深入探讨如何使用jQuery实现区域拖拽,以及如何支持自定义形状的变换。 ### 一、jQuery拖拽基础 jQuery的`draggable()`函数是实现元素拖拽的核心。它允许用户通过鼠标点击并移动来改变元素的位置。在...

    自己动手增强 jquery.multiselect2side 调用

    标题 "自己动手增强 jQuery.multiselect2side 调用" 提到的是一个关于自定义和扩展 jQuery 多选下拉插件 `jQuery.multiselect2side` 的实践过程。这个插件通常用于创建一种分栏显示的多选下拉列表,方便用户在两个...

    jQuery实战(一)

    《jQuery实战(一)》这篇文章将引导我们深入理解并运用jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画制作和Ajax交互,是前端开发中的重要工具。在本文中,我们将探讨jQuery的基本概念、...

    第一课 jquery学习准备工作-011

    本篇将从理论基础、课程计划和所需工具三个方面,帮助你做好学习jQuery的准备工作。 一.理论基础 1. JavaScript基础:作为jQuery的基础,JavaScript的基本语法是必不可少的,包括变量、数据类型、条件语句、循环...

    Jquery实现打字小游戏

    本篇文章将深入探讨如何利用jQuery来创建一个打字小游戏,旨在帮助初学者理解jQuery的事件处理、DOM操作以及动态更新页面内容等核心概念。 ### 1. jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了HTML文档...

    jQuery鼠标经过动画出现冒泡对话框特效.zip

    本篇文章将围绕"jQuery鼠标经过动画出现冒泡对话框特效"这一主题,详细解析其背后的实现原理和应用技巧。 首先,我们来看"jQuery鼠标经过动画"这一部分。在HTML结构中,通常我们会为需要触发动画效果的元素添加特定...

Global site tag (gtag.js) - Google Analytics