2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的，min版主要应用于已经开发成的网页中，而非min版
的文件比较大，里面有整洁的代码书写规范和注释，主要应用于脚本开发过程当中。
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3
，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后
续版本将不再支持IE6/7/8浏览器。jQuery能够使用户的html页面保持代码和html内容分离
，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,
做得更多)。jQuery是免费、开源的，使用MIT许可协议。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
1，引入Jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <!-- 引入jquery -->
<script src="jquery-1.11.2.min.js"></script> </head>
<body> </body>
</html>
①取元素： js方式和jquery方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <!-- 引入jquery -->
<script src="jquery-1.11.2.min.js"></script> </head>
<body> <div id="dv">第一个DIV</div> <div class="v">第二个DIV</div>
<div class="v">第三个DIV</div>
<div class="v">第四个DIV</div> <input type="text" name="uid"> </body>
<script type="text/javascript">
//一、js方式： //①js取元素，取出来的是具体的元素对象
//1,根据Id取
//alert(document.getElementById("dv"));
//2,根据class取
//alert(document.getElementsByClassName("v"));
//3, collection 根据标签名找取到的是集合
// alert(document. getElementsByTagName('div'));
//4,根据name找 取到的是NodeList 数组
// alert(document.getElementsByName('uid')); //二、jquery方式 //①jquery取元素，取出来的是jquery对象
$(document).ready(function(e){
//1,根据Id取
//alert($("#dv"));
//2,根据class取
//alert($(".v"));
//循环输出 根据下标取取出来的是元素，eq取取出来的是对象
// var v=$(".v");
// for (var i = 0; i < v.length; i++) {
// alert(v.eq(i)[0]);
// }
//3,Object根据标签名找取到的是对象
//alert($("div"));
//4,根据属性找的是对象 任意一个属性都可以这么取
//alert($("[name=uid]")); })
</script>
</html>
②操作内容 ③操作属性 ④操作样式 ⑤点击事件 点击变色 checkbox下多选中要用for循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <!-- 引入jquery -->
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
#dv{
font-size:10px;
}
.list{
width:200px;
height: 30px;
text-align: center;
line-height: 30px;
vertical-align: middle;
background-color: green;
color:red;
}
</style>
</head>
<body> <div id="dv" name="Div"><h1>第一个DIV</h1></div> <div class="v">第二个DIV</div>
<div class="v">第三个DIV</div>
<div class="v">第四个DIV</div>
<br/>
<div class="list">hello</div>
<div class="list">world</div>
<div class="list">hi</div>
<div class="list">haha</div> <br/>
<input type="text" name="uid" value="表单"> <input type="checkbox" id="aa" value="hello">
<input type="button" id="box" value="取值"> </body>
<script type="text/javascript">
//一、js方式： //①js取元素，取出来的是具体的元素对象
//1,根据Id取
//var v =document.getElementById("dv");
//2,根据class取
//alert(document.getElementsByClassName("v"));
//3, collection 根据标签名找取到的是集合
// alert(document. getElementsByTagName('div'));
//4,根据name找 取到的是NodeList 数组
//var v = document.getElementsByName('uid'); //②js操作内容
//alert(v.innerText);//获取文本内容
//alert(v.innerHTML);//获取HTMl代码
//v.innerText="hello";//赋新值hello文本
//v.innerHTML="<span style='color:red'>hello</span>";//用HTML代码把文字变色
//v[0].value="00";//注意取出来的是数组，获取或者设置表单元素的内容。 //③js操作属性
//alert (dv.getAttribute("name"));//获取属性的值
//dv.setAttribute("bb","cc");//设置属性
//dv.removeAttribute("name");//移除属性 //④js操作样式
//alert(dv.style.fontSize);//js操作样式只能是内联 不能是内部和外部样式表
//dv.style.fontSize="36px";
//修改或者设置样式，优先级最高
//⑤js里加事件在元素中要有onclick="Show()" // function Show(div)
// {
// alert(div.innerText);
// alert("aa");
// } //二、jquery方式 //①jquery取元素，取出来的是jquery对象
$(document).ready(function(e){
//1,根据Id取
var d=$("#dv");
//2,根据class取
//alert($(".v"));
//循环输出 根据下标取取出来的是元素，eq取取出来的是对象
// var v=$(".v");
// for (var i = 0; i < v.length; i++) {
// alert(v.eq(i)[0]);
// }
//3,Object根据标签名找取到的是对象
//alert($("div"));
//4,根据属性找的是对象 任意一个属性都可以这么取
//var bd=$("[name=uid]");
//②jquery操作内容
//alert(d.text());//获取元素的内容（文本）
//alert(d.html());//获取元素的内容（加html代码）
//d.text("改变内容");//给元素赋值
//d.html("<span style='color:red'>改变html代码</span>");//改变html代码，代码赋值 没参数是取值，有参数是赋值
//bd.val();//操作表单内容，可以取值赋值，无参取值，有参赋值，括号内双引号
//③jquery操作属性
//alert(d.attr("name"));//上面必须有var d=$("#dv");
//d.attr("jq","er");//添加设置属性
//d.removeAttr("jq");//移除属性 注意A要大写
//④jquery 操作样式
//alert(d.css("font-size"));//取样式 不仅可以取内联样式 还可以取到内部样式
//d.css("font-size","100px");//设置样式
//⑤jquery 操作事件
//1,重复一次执行一次，下面重复两次，点击后执行两次
// $("#dv").click(function(){
// alert("aa");
// }) // $("#dv").click(function(){
// alert("aa");
// })
//2,class下 点击找到该元素
// $(".v").click(function(){
// alert($(this).text());
// })
//2,菜单选中
// $(".list").click(function(){
// //让所有元素变为非选中状态
// $(".list").css("background-color","green").css("color","red"); // //让该元素变为选中状态
// $(this).css("background-color","blue");
// $(this).css("color","#FFF");
// })
//3,取checkbox选中值
$("#box").click(function(){
if($("#aa")[0].checked)
{
alert($("#aa").val());
}
else
{
alert("未选中！");
}
}) })
</script>
</html>
图：
2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色的更多相关文章
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- JQUERY操作html--获取和设置内容、属性、回调函数
一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...
- jQuery 2.0.3 源码分析 钩子机制 - 属性操作
jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置 ...
- jQuery属性操作之DOM属性操作
DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...
- jQuery属性操作之html属性操作
jQuery的属性操作, 是对html文档中的属性进行读取.设置和移除操作.比如,attr(). removeAttr(). 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1 ...
- javaScript的select元素和option的相关操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- javascript访问html元素的内容(2)
对于(1)中最后一个包装方式创建的是一个方法,我们必须以方法调用的方式来使用它,这和其他默认的以属性返回结果略有不同,如果有强迫症的童鞋有些伤不起,那么我们下面就把它实现为属性返回的方式: //chi ...
- javascript访问html元素的内容(1)
形如如下格式的html元素: <p id="my_p">I'm <strong>BIG</strong> panda!!!</p> ...
随机推荐
- mysql 5.7 windows zip安装
mysql 官网下载windows zip 安装包 并解压 (D:wampmysql-56-winx64) 添加path D:wampmysql-5722-winx64bin 创建data目录 D:\ ...
- Cookie 详解以及实现一个 cookie 操作库
Cookie 详解以及实现一个 cookie 操作库 cookie 在前端有着大量的应用,但有时我们对它还是一知半解.下面来看看它的一些具体的用法 Set-Cookie 服务器通过设置响应头来设置客户 ...
- timeslot概念（还是不太懂呀！！）
rules: 1. event.triggered只会保持一个time_slot,在下一个time_slot将会丢失这个标记,如果不能保证在每一个time_slot都会检测到这个标志,那么将会丢失这个 ...
- pandas.read_csv 报ssl.SSLError
- Nginx与python web服务配置（Uwsgi& FastCGI）
Uwsgi start uswgi uwsgi --harakiri 360000 --body-read-warning=10000 --max-fd=65536 -b 1000000 --http ...
- Android学习2013年10月11日
1.LinearLayout http://www.cnblogs.com/salam/archive/2010/10/20/1856793.html LinearLayout是线性布局控件,它包含的 ...
- 81. Spring Boot集成JSP疑问【从零开始学Spring Boot】
[原创文章,转载请注明出处] 针对文章: ()Spring Boot 添加JSP支持[从零开始学Spring Boot] 有网友提了这么一些疑问: 1.Spring Boot使用jsp时,仍旧可以打成 ...
- 【Ajax 1】Ajax与传统Web开发的区别
导读:从用户体验度的角度来说,利用Ajax进行开发的网站,其体验度高于利用传统Web开发技术,那么,是什么因素导致了这一现象呢?难道说Ajax开发,就一定优于传统Web技术吗?本篇文章,将主要介绍Aj ...
- C#中为什么不能再方法里定义静态变量(Static)
c#的静态变量是在对象生成的时候分配内存空间的,而不是函数执行的时候. 如果在函数里定义,那么这个变量就需要在函数执行的时候分配内存空间,这是C#不允许的,至于为什么不允许,个是因为垃圾回收机制的问题 ...
- PHP中的字符串替换(str_replace)
/*替换 字符串处理 str_replace() */ $num = 0; $str = "http://www.phpbrother.net/php/demo.php";$st ...