初识jQuery(适合初学者哟.........)
您要知道!!
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。
微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,
为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。
我们先来学习一下jQuery的语法结构:
$(selector).action();
1.工厂函数$()
在jQuery中,"$"美元符号等价于jQuery,即$()=jQuery(),$()的作用是将DOM对象转化为jQuery对象,只有将DOM对象装化为jQuery对象后,才能使用jQuery的方法
注意!!!!!!:
当$()参数是DOM对象时,该对象不需要使用双引号包裹起来,如果获取的是document对象,则写作$(document)
2.选择器
jQuery几乎支持CSS中的所有选择器,如:标签选择器,类选择器,ID选择器,后代选择器
语法:
$(selector)
选择表达式可以是CSS选择器:
1 $(document)//选择整个文档对象
2 $('#myId')//选择ID为myId的网页元素
3 $('div.myClass')//选择class为myClass的div元素
4 $('input[name=first]')//选择name属性等于first的input元素
(1).首先我们来学习jQuery的第一个方法addClass();
addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是向被选元素添加一个或多个样式,它的语法结构如下
语法
jQuery 对象.addClass([样式名])
其中,样式名可以是一个也可以是多个,多个样式名需要用空格隔开
实现的功能:
增加一条样式规则: .addClass(‘myClass’)
增加多条样式规则: .addClass(‘myClass yourClass’)
(2).jQuery的css方法
语法:
css("属性","属性值");
定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
实例 1
将所有段落的颜色设为红色:
$("button").click(function(){
$("p").css("color",function(){return "red";})
;
});
实例 2
逐渐增加 div 的宽度:
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});
(3).jQuery对象和DOM对象的相互转换
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。 下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。 如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。 2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] 这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。 以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
初识jQuery(适合初学者哟.........)的更多相关文章
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)
>_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~
- 5、WPF实现简单计算器-非常适合初学者练习
Sample Calculator 这是微软社区WPF的一个示例,在源程序的基础上我进行了一点点修改,非常适合初学者练习,详细代码解释. 源程序的下载地址 http://code.msdn.micro ...
- 强烈推荐visual c++ 2012入门经典适合初学者入门
强烈推荐visual c++ 2012入门经典适合初学者入门 此书循序渐进,用其独特.易于理解的教程风格来介绍各个主题,无论是编程新手,还是经验丰富的编程人员,都很容易理解. 此书的目录基本覆盖了Wi ...
- JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
- (李南江jQuery+Ajax)第一章:初识jQuery
第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...
- Linux内核开发进阶书籍推荐(不适合初学者)
Linux内核开发进阶书籍推荐(不适合初学者) 很早之前就想写一篇文章总结一下Linux Kernel开发的相关资料,项目的原因,再加上家里的一些事情,一直没能找到闲暇,今天终于有些时间,希望可以完成 ...
- 适合初学者的python实际例子
最近在github上发现了一个有意思的项目,很适合初学者学习python代码. 学习一门语言刚开始的时候是很枯燥的,各种概念语法以及无聊的打印都会让人失去更进一步学习的动力. 很多同学在学习了一段时间 ...
- 7-OKHttp使用详解,步骤挺详细的,适合初学者使用!
OKHttp使用详解,步骤挺详细的,适合初学者使用! 一,OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络. 这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Squ ...
随机推荐
- iOS 强制横屏
// // AAAAViewController.m // hengp // // Created by 朱信磊 on 15/2/13. // Copyright (c) 2015年 niit. Al ...
- web工作方式,浏览网页,打开浏览器,输入网址按下回车键,然后会显示出内容,这个过程是怎样的呢?
以下内容摘自<Go Web编程>,介绍的通俗易懂. 我们平时浏览网页的时候,会打开浏览器,输入网址后按下回车键,然后就会显示出你想要浏览的内容.在这个看似简单的用户行为背后,到底隐藏了些什 ...
- URL是否有效
unit Unit1;interfaceuses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...
- hdu 1712 ACboy needs your help 分组背包
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem ...
- 期望-pku-oj-1055:Tree
题目链接: http://poj.openjudge.cn/practice/1055/ 题目意思: 给出的树最大节点个数为n的情况下,求树上点深度的期望. 解题思路: 数学期望公式的推导. 自己先画 ...
- PHP中获取中英文混合字符串长度[主要是指个数,而不是字符串长度](转)
今晚在写框架的表单验证类时,需要判断某个字符串长度是否在指定区间内,很自然地,想到了PHP中的strlen函数. $str = 'Hello world!'; echo strlen($str); ...
- 大型高性能ASP.NET系统架构设计
大型动态应用系统平台主要是针对于大流量.高并发网站建立的底层系统架构.大型网站的运行需要一个可靠.安全.可扩展.易维护的应用系统平台做为支撑,以保证网站应用的平稳运行. 大型动态应用系统又可分为几个子 ...
- windows7怎么共享文件夹
http://jingyan.baidu.com/article/d45ad148f06fef69552b80e6.html
- Java基础知识强化之IO流笔记68:Properties和IO流集合使用
1. Properties和IO流集合使用 这里的集合必须是Properties集合: public void load(Reader reader):把文件中的数据读取到集合中 public v ...
- Azure Powershell 创建 Internal Load Balancer
Select-AzureSubscription -SubscriptionName "订阅名称" $serviceName="云服务名称" $ilbName= ...