jquery 的基础知识,以及和Javascript的区别
想到之前所学的javascript 我们会想到这几个方面:找元素; 操作内容; 操作属性;操作样式;统一操作元素;
jquery 也是从这几个方面来学习的。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script> //首先要引入jquery包
<style type="text/css">
#aa{ width:100px; height:100px;}
</style>
</head>
<body> /*举了几个例子*/
<div id="aa" style="color:red"><span>aaaaaa</span></div>
<div class="a1">div1</div>
<div class="a1">div2</div>
<span class="a1" bs="1">span1</span>
<input type="text" name="uid" id="bd" value="aa" />
</body>
1 找元素:(1)javascript 找元素
<script type="text/javascript">
var a=document.getElementById("aa"); //获取ID
var a=document.getElementsByClassName("a1");//获取class
var a=document.getElementsByTagName("div");//找标签
var a=document.getElementsByName();//表单元素用的比较多
</script>
(2)jquery 找元素
<script type="text/javascript">
var a = $("#aa");
var a = $(".a1");
alert(a.eq(2)); //读取的是span的class
var a = $("div");
var a = $("[name=xx]");//如果是读取name值 可以直接赋值
</script>
2 操作内容
(1)javascript
var a = document.getElementById("aa")
//非标单元素
alert(a.innerText); //文本
alert(a.innerHTML); //HTML代码
//表单元素
alert(a.value);
a.value="hello";
(2)jquery
var a=$("#aa")
//非表单元素
alert(a.text());
a.text("bbbbb"); //直接更改
alert(a.html());
//表单元素
a.val("hello");
3 操作属性
(1)javascript
a.setAttribute("test","test"); //设置属性和属性值
a.removeAttribute("test");
alert(a.getAttribute("value"));
(2)jquery
a.attr("test","test"); //设置属性和属性值
a.removeAttr("test");//直接移除
alert(a.attr("value"));
a.prop("test","test");// 用prop 可以减少bug
a.removeProp("test");
alert(a.prop("test"));
4操作样式
(1)javascript
a.style.fontSize = "30px"; //无法获取外部样式表
alert(a.style.color);
(2)jquery
a.css("background-color","green");
alert(a.css("width")); //这里是从外部样式表获得的,可以直接读出
5 统一操作样式
(1)javascript
var d = document.getElementsByClassName("a1"); //获取的是cLassname 是一个数组 要利用循环才能修改每一个class
for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}
(2)jquery
$(".a1").css("font-size","30px"); //利用jquery可以直接修改
$(".ck").prop("checked",true); //可以直接添加元素
下面是一个全选的例子,用jquery来写非常方便
当点击全选的时候 下面的选项都被选中,移除后,都不选中
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$("#ck").click(function() { //$(this); //获取自身
//$(this).prop("checked"); 返回值是true,或者false 点击的时候是true,移除的时候是false $(".ck").prop("checked",$(this).prop("checked")) })
下面的例子是关于外部样式表的:
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.aa{ width:100px; height:100px; float:left; background-color:green; margin:2px;}
</style>
</head> <body> <div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div> </body>
如图所示:流式布局
我想做一个效果,就是点击某一个方块的时候就让它变红色(其他的方块是绿色的)
运用jquery来写
//首先要引用jquery包,我就不写了 从网上下载就可以 <script type="text/javascript"> $(".aa").click(function(){
$(".aa").css("background-color","green"); //原本的都是绿色的
$(this).css("background-color","red"); //点击的这个方块变红色
}) </script>
效果如图所示:
jquery 的基础知识,以及和Javascript的区别的更多相关文章
- js基础知识温习:Javascript中如何模拟私有方法
本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...
- 【jquery】基础知识
jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...
- jquery选择器基础知识(复制w3c)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- jQuery笔记——基础知识
jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这 ...
- jquery选择器基础知识
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...
- HTML DOM 基础知识,成为javascript晋级高手的必备手册
一.DOM 简介,什么是 DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 标记语言,也称置标语言,是一种将文本( ...
- Canvas和SVG的基础知识,以及两者的区别(小白)
首先我们来说一下Canvas是什么,它有什么作用以及它的知识点. Canvas是<HTML5>的新标签,它通常用于通过脚本(也就是JavaScript)来绘制图像.但是它本身并没有绘制能力 ...
- java基础知识2--String,StringBufffer,StringBuilder的区别
String,StringBufffer,StringBuilder的区别 1.可变不可变方面 String类中使用字符数组保存字符串 ,final 修饰当然是不可变的,用String来操作字符串的 ...
- C#基础知识 结构与类的区别
网上看到struct与class之间的区别,都写的很多,当然说的是对的,也很详细.不过我个人不喜欢照本宣科,还是要有自己的理解和认识,方便记忆. (前提:对于值类型与引用类型有一定的认识) 结构最重要 ...
随机推荐
- redis 高级配置
一.安全性 设置密码:在配置文件中设置 requirepass 123456 由于redis的速度非常快,每秒可以进行15万次的暴力破解,所以密码设置要强壮些 在客户端登录或者连接的时候,使用 aut ...
- YII 1.0 (7) 登录信息调取 session使用
登陆信息调取 Yii::app()->user->name,调取登陆的session信息 登录时 调用了 $LoginForm->login() 这个方法上面就能够取到登录的用户名 ...
- iOS 程序初始一个带导航栏的视图
@synthesize window = _window; @synthesize rootViewController = _rootViewController; - (BOOL)applicat ...
- Delphi实例之一个较复杂的记事本的实现
http://www.mamicode.com/info-detail-110813.html delphi中控件位置及自动排版的问题 http://blog.csdn.net/avan_lau/ar ...
- Sublime3 中在行尾增加一个分号的方法
1,自己录制一个宏,名称为add comma to end.sublime-macro,宏内容如下: [ { "args": { "extend": false ...
- 第三章 Python 的容器: 列表、元组、字典与集合
列表是Python的6种内建序列(列表,元组,字符串,Unicode字符串,buffer对象,xrange对象)之一, 列表内的值可以进行更改,操作灵活,在Python脚本中应用非常广泛 列表的语法格 ...
- SQL Server事务、隔离级别详解(二十九)
前言 事务一直以来是我最薄弱的环节,也是我打算重新学习SQL Server的出发点,关于SQL Server中事务将分为几节来进行阐述,Always to review the basics. 事务简 ...
- 大大维的游戏机计划3--2048v1
前几天由于忙着过年串门,游戏机的计划搁置了几天.这两天终于空出了一块时间,抽空写了2048. 由于笔者前面自制了一个类似2048的游戏,所以写起来也算是轻车熟路,花了两个晚上也就差不多了. 废话少说, ...
- 在C语言中以编程的方式获取函数名
仅仅为了获取函数名,就在函数体中嵌入硬编码的字符串,这种方法单调乏味还易导致错误,不如看一下怎样使用新的C99特性,在程序运行时获取函数名吧. 对象反射库.调试工具及代码分析器,经常会需要在运行时访问 ...
- [CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...