Use css selectors to add the html tag 's action - joshokn - ITeye博客

`

joshokn

浏览: 103242 次
性别:

最近访客更多访客>>

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

77tt77：我艹，原来回调就这样啊。艹他妈的词语！明显被这种看似深奥的词语 ...
callback
dongtianshuiyue：好帖<script language="jav ...
js中隐藏的arguements[转]
th3639：谢谢分享．．．．不过有很多打不开
资料收藏
wealink： http://www.mangbar.com 用dojo的
想知道一些dojo搭建的站点案例
jindw： joshokn 写道大家不用在争论dojo速度问题了吧，在我看 ...
想知道一些dojo搭建的站点案例

Use css selectors to add the html tag 's action

博客分类：

JavaScript

阅读更多

用css selectors 绑定html tag的行为
等同于下面的语句:

<li>
	<a onclick="this.parentNode.removeChild(this)" href="#">
		Click me to delete me
	</a>
</li>

这里用到了Ben Nolan 在 http://bennolan.com/behaviour/ 上发布的Behaviour.js .

1 . html文件如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Example</title>
		<script type="text/javascript" src="behavior.js"></script>
		<script type="text/javascript" src="example.js"></script>
	</head>
	<body>
	<ul id="example">
		<li>
			<a href="/delete">Click me to delete me</a>
		</li>
	</ul>
	</body>
</html>

2. example.js文件如下：

var myrules = {
	'#example li' : function(el){
		el.onclick = function(){
			this.parentNode.removeChild(this);

		}
	}
};

Behaviour.register(myrules);

结论: 这样的结果会让view层更清洁.

[附]behavior.js: http://bennolan.com/behaviour/behaviour.js

分享到：

想知道一些dojo搭建的站点案例 | Ajax-Engine

2006-11-05 17:08
浏览 4013
评论(0)
论坛回复 / 浏览 (0 / 2606)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

英文原版-Selectors Specificity and the Cascade 1st Edition: Exactly how does the “cascade” in Cascading Style Sheets work?... Why wait when you can learn how to use selectors and other key CSS 3 features right away?,解压密码 share.weimo.info

use cssTheme to set eclipse RCP css: https://www.vogella.com/tutorials/Eclipse4CSS/article.html#:~:text=%20Eclipse%204%20CSS%20Styling-%20Tutorial%20%201,attributes%20and%20selectors%0AThe%20CSS%20attributes%20for...%20More%20

HTML5 and CSS3: From there, you’ll get to play with CSS3’s new selectors so you can learn how to apply styles to elements without adding extra markup to your content. Then we’ll explore HTML’s audio and video ...

Learning Web Design: A Beginner’s Guide to HTML... ..., 5th Edition: Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics By 作者: Jennifer Robbins ISBN-10 书号: 1491960205 ISBN-13 书号: 9781491960202 Edition 版本: 5 出版日期: 2018-05-21...

Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015): Desktop-only websites just aren’t ...Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc

Css Selectors Cheatsheet: 根据提供的文件信息，这里将对CSS选择器进行详细介绍。CSS（层叠样式表）是一种用于定义HTML或XML文档中元素的外观的语言。选择器是CSS的核心部分，它们定义了哪些HTML元素应该应用样式规则。 ### CSS选择器速查表 ...

Learn CSS in One Day and Learn It Well (Volume 2): How to use the CSS color property to change colors How to modify text and font of a website How to create navigation bars How to create gorgeous looking tables to display your data

HtmlAgilityPack.CssSelectors.NetCore:HtmlAgilityPack.CssSelector的NetStandard版本: HtmlAgilityPack.CssSelectors.NetCore· 使用的NetStandard版本安装 Install-Package HtmlAgilityPack.CssSelectors.NetCore 用法 var doc = new HtmlAgilityPack . HtmlDocument (); doc . Load ( new ...

[HTML5.and.CSS3(2nd,2013.10)].Brian.P.Hogan.文字版.pdf: You’ll draw with the Canvas and SVG, do simple animations with pure CSS, work with advanced CSS selectors, and make audio and video play natively. You’ll bring your web apps to the next level as ...

postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件.zip: postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件 postcss-icss-selectors 用于本地范围类和id的css模块的PostCSS插件用法postcss([ require('postcss-icss-selectors')(options) ])有关环

CSS Quick Syntax Reference: The CSS Quick Syntax Reference is a 150-page syntax reference to the Cascading Style Sheet specification and style sheet language. It presents the essentials of CSS in a well-organized format that can...

Beginning CSS3 (pdf): CSS3 is the latest version of Cascading Style Sheets, the language that in the hands of a skilled designer turns the ugly duckling of unadorned HTML into the gracious swan of a sophisticated web page....

HTML5.and.CSS3.Building.Responsive.Websites.pdf: Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc Make a mobile website using jQuery ...

Professional CSS3(PACKT,2016).pdf: CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger ...

HTML5 and CSS3: Develop with Tomorrow's Standards Today: 5. **选择器增强**：CSS3 扩展了选择器的功能，提供了更多用于定位元素的方法，如子选择器（Child Selectors）、相邻兄弟选择器（Adjacent Sibling Selectors）等。 #### 三、实际应用中的挑战与解决方案尽管 ...

PostCSS插件list-selectors.zip: list-selectors 可以列出你在 CSS 使用的 selector，它可作为一个独立的函数，CLI, 或者 PostCSS 插件。使用示例：var listSelectors = require('list-selectors'); listSelectors( ['style/**/*.css', '!...

快速提升CSS编码能力的五个必备知识点: 学习资源：《Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today》、《Browser Support for CSS3: What’s the Current Status?》和《The Importance of Cross Browser Compatibility:...

JavaScript — 与HTML&CSS的关系1: 在 HTML5 中，JavaScript 可以通过使用 CSS Selectors 来选择和操作 HTML 元素的样式。CSS Selectors 是一种选择器语法，用于选择 HTML 元素，以便对其进行样式设置或其他操作。JavaScript 可以通过使用 CSS ...

postcss-combine-duplicated-selectors:自动使CSS选择器保持唯一: npm install --save-dev postcss postcss-combine-duplicated-selectors# oryarn add --dev postcss postcss-combine-duplicated-selectors使用PostCSS JS API 'use strict' ;const fs = require ( 'fs' ) ;const ...

Global site tag (gtag.js) - Google Analytics