jquery 学习第一课之start
1.$选取符 ( $ == jQuery )
(1) $("div").addClass("special");选取本页面中的所有<div>元素,然后将这些div加上都加上一个名为“special”的CSS样式。
(2)$("div")选取所有的div元素。
(3)$(“#body”)选取id为body的元素。
(4)$("div #body")选取id为body的<div>。
(5)$("div.contents p") 选取class为contents的<div>所有的下层<p>元素。
(6)$("div>div")选取被<div>包裹的下一层<div>。
(7)$("div:has(div)") 选取至少包住一个子<div>的<div>元素。
2. jquery能方便地对DOM 进行操作,比如添加、修改或删除节点,为节点添加事件处理等。
(1)选取所有包含target属性的<a>,并且在其节点下添加一段文字:
$(“a[target]".append(“open in a new window”))
(2)选取id为body的元素,并且修改两个CSS属性:
$("#body").CSS({ border:"1px solid green", height:"40px" });
(3)在提交表单时,判断username字段是否为空,如果为空,则显示help区块内的文字。
$("form").submit(function(){ if($("input #username").val()=="") $("span.help").show(); });
(4)当用户点击id为open的链接时,显示id为menu的区块,并返回false.
$("a # open").click(function(){ $("menu").show(); return false; });
(5)将id为menu的区块以动态下拉效果显示出来。
$("#menu").slideDown("fast");
(6)将所有的<div>渐变为300px宽,文字与边界20px宽.
$("div").animate({ width:'300px', padding:'20px' },'slow');
(7)具有动态效果的回调函数,将所有的<div>以0.5s的动态效果隐藏之后,再以0.5s的动态效果显示。其中$(this)是方法方法调用方的元素。
$("div").hide(500,function({ $(this).show(500); }));
(8) 获取sample.html 并且找出其中所有<div>下层的<h1>,将<h1>中的内容写入id为body的元素中。
$("#body").load("sample.html div>h1");
(9)通过getJSON获得JSON格式的数据,并通过回调方法处理这些数据:
$.getJSON("test.json",function(data){ for(var idx in data) $("#menu").append("<li>"+data[idx]+"</li>"); });
3.链式写法
x选取页面中所有的<div>,然后隐藏它们,修改文字为蓝色并将<div>以下拉的效果显示出来,那么原有的选取操作:
$("div").hide();
$("div").CSS("color","blue");
$("div").slideDown();
用一行代码来替换就是:
$("div").hide().CSS("color","blue").slideDown();
需要注意的代码:
$("ul.open") //找出文件内所有class为open的<ul>
.children //过滤出下一层所有的<li>
.addClass(“open”) //对这些<li>新增一个CLASS
.end() //再回到前一次的搜索结果,也就是所有的<ul>
.find("a") //找出其中所有的<a>
.click(function(){ //对<a>新增事件处理
$(this).next().toggle();
return false;
})
.end(); //回到前一次的搜索结果
4. Document ready事件
jQuery的document ready事件模拟DOM Content Loaded 事件。
DOM Content Loaded 事件和window.onload 事件的区别在于,DOM Content Loaded 事件开始得更早一些。
并且,window.onload 并没有办法多次指定不同的方法来执行,最后指定的方法回覆盖之前的方法。比如:
window.onload = function(){
alert("hello world!");
};
window.onload = function(){
alert("您好");
};
如果使用jQuery就可以写成:
$(document).ready(function(){
alert('hello world!');
});
$(document).ready(function(){
alert('您好!');
});
reference:
1.《巧用jquey》 吴超 张帅著。
jquery 学习第一课之start的更多相关文章
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- Elasticsearch7.X 入门学习第一课笔记----基本概念
原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...
- MFC学习-第一课 MFC运行机制
最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...
- python学习第一课要点记录
写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...
- python学习第一课
第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...
- Git速成学习第一课:创建版本库与版本回退
Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我太困了0.0精神点再写...... /*我来啦!以后会陆续更新自己的学习笔记*/ Git是分布 ...
- Kotlin学习第一课:从对比Java开始
1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...
- Asp.net MVC4高级编程学习笔记-视图学习第一课20171009
首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...
- shell脚本学习第一课
shell是一种程序设计语言,是访问操作系统内核的服务. Linux的shell种类常见的有: Bourne Shell(/usr/bin/sh或/bin/sh) Bourne Again Shell ...
随机推荐
- Android 6.0 双卡拨号
相关 api getCallCapablePhoneAccountsAdded in API level 23 Android 5.0 之前的版本 Call from second sim 获取 si ...
- Objective-C:swift、objective-c、C++、C混合编程
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...
- Http,Https (SSL)的Url绝对路径,相对路径解决方案Security Switch 4.2 英文帮助文档 分类: ASP.NET 2014-10-28 10:50 147人阅读 评论(1) 收藏
Security Switch 4.2 =================== Security Switch enables various ASP.NET applications to auto ...
- CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
- redhat6.4 配置centos6 yum替换
1.卸载掉系统redhat自带的yum rpm -qa |grep yum |xargs rpm -e --nodeps 2 下载相关的centos yum插件 主要有python-inipa ...
- express 安装与卸载
卸载: npm uninstall -g express安装指定版本: npm install -g express@3.5.0查看版本: express -V注意express -V中的V要大写,不 ...
- SGU 121.Bridges painting
原题地址 题意: 新百慕大由N个岛屿组成,在岛屿之间有一些连接它们的桥.在任意两个岛屿之间,最多只有一座桥连接它们.总统先生下达命令,要求给所有桥上色. 每一座桥能被染成 白色 或者 黑色. 每一个岛 ...
- POJ 1734.Sightseeing trip (Floyd 最小环)
Floyd 最小环模板题 code /* floyd最小环,记录路径,时间复杂度O(n^3) 不能处理负环 */ #include <iostream> #include <cstr ...
- Swift中的dispatch_once 单例模式
以下有三种方法实现单例模式,支持懒初始化和线程安全 全局变量 结构 dispatch_once 全局变量: 这里使用了全局变量而非类变量,是因为不支持类变量 private let _Singleto ...
- asp.net中后台javaScrip的使用
ClientScriptManager csm = Page.ClientScript; //Script标记靠近<form>标签 //csm.Register ...