Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
使用jQuery放大字体：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<!-- 自定义的js必须写在jQuery引入之后 -->
<script>
function bigger() {
//获取第1个p的字号(16px)
var size = $("p:eq(0)").css("font-size");
//去掉单位px,便于增加字号
size = size.replace("px","");
//字号+1,再设置给所有的p
$("p").css("font-size",++size+"px")
}
</script>
</head>
<body>
<input type="button" value="+"
onclick="bigger();"/>
<p>jQuery是一个轻量级的js框架</p>
<p>它提供了简洁的API,极大的简化了js编程</p>
<p>它主要封装了DOM操作的API</p>
</body>
</html>
使用jQuery，点击图片后放大，缩小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function prt() {
var ps = $("p");
console.log(ps);
for(var i=0;i<ps.length;i++) {
console.log(ps[i].innerHTML)
}
}
function chg(img) {
if($(img).width()==218) {
//变大
$(img).width(250).height(250);
} else {
//变小
$(img).width(218).height(218);
}
}
</script>
</head>
<body>
<input type="button" value="打印"
onclick="prt();"/>
<p>jQuery对象可以调用jQuery方法</p>
<p>DOM对象可以调用DOM方法</p>
<p>jQuery对象本质上是对DOM数组的封装</p>
<div>
<img src="../images/01.jpg"
onclick="chg(this);"/>
<img src="../images/02.jpg"
onclick="chg(this);"/>
<img src="../images/03.jpg"
onclick="chg(this);"/>
</div>
</body>
</html>
选择器知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//页面加载后自动调用此匿名函数.
//等价于window.onload=function(){}
$(function(){
//1.基本选择器
//和CSS基本选择器一样,略
//2.层次选择器
//前2个和CSS派生选择器一样,略
console.log($("#gz+li"));
//3.过滤选择器
//3.1基本过滤(*)
console.log($("li:first"));
console.log($("li:lt(2)"));
console.log($("li:odd"));
console.log($("li:not(#gz)"));
//3.2内容过滤
console.log($("li:contains('京')"));
//3.3可见性过滤
console.log($("li:hidden"));
//3.4属性过滤
console.log($("li[id]"));
//3.5状态过滤
console.log($("input:disabled"));
console.log($("input:checked"));
//4.表单选择器
console.log($(":radio"));
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>南京</li>
<li>天津</li>
<li style="display:none;">杭州</li>
</ul>
<!--
readonly:只读,但数据依然可以提交到服务器.
disabled:不可用,数据将无法提交到服务器.
-->
<p>
<input type="text" disabled/>
</p>
<p>
<input type="password"/>
</p>
<p>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
</body>
</html>
jQuery操作DOM知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.big {
font-size: 50px;
}
.important {
color: red;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//1.读写节点
//1)html()==innerHTML
console.log($("p:first").html());
$("p:first").html("1.jQuery支持<u>读写</u>节点");
//2)text()==innerText
//3)val()==value
console.log($(":button:first").val());
$(":button:first").val("BBB");
//4)attr()==setAttribute()+getAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/02.jpg");
//3.查询某节点的亲戚
//假设别人传给我如下节点
var gz = $("#gz");
var ul = $("ul");
//假设我处理了该节点,又要处理它的亲戚
console.log(gz.parent());
console.log(gz.prev());
console.log(gz.siblings());
console.log(ul.find("li:not(li[id])"));
//4.样式操作
$("p:first").addClass("big").addClass("important");
$("p:first").removeClass("big").removeClass("important");
console.log($("p:first").hasClass("big"));
});
//切换样式:
//判断有没有该样式,有则删除,无则增加
function chg() {
$("p:first").toggleClass("important");
}
//2.增删节点
//2.1增加
function f1() {
var li = $("<li>杭州</li>");
$("ul").prepend(li);
}
//2.2插入
function f2() {
var li = $("<li>南京</li>");
$("#gz").after(li);
}
//2.3删除
function f3() {
$("li:last").remove();
}
</script>
</head>
<body>
<p>1.jQuery支持<b>读写</b>节点</p>
<p>2.jQuery支持<b>增删</b>节点</p>
<p><input type="button" value="AAA"/></p>
<p><img src="../images/01.jpg"/></p>
<p>
<input type="button" value="增加"
onclick="f1();"/>
<input type="button" value="插入"
onclick="f2();"/>
<input type="button" value="删除"
onclick="f3();"/>
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>天津</li>
</ul>
<p>
<input type="button" value="切换"
onclick="chg();"/>
</p>
</body>
</html>
广告收起案例：
1.点击按钮收起
2.自动收起
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#gg {
border: 1px solid red;
height: 300px;
}
#gg input {
float: right;
margin: 10px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//给按钮x绑定单击事件
$("#gg :button").click(function(){
//让广告区域右下向上收起直到消失
$("#gg").slideUp(500);
});
//页面加载后,延迟3S自动点击按钮x,收起广告
setTimeout(function(){
$("#gg :button").trigger("click");
},3000);
});
</script>
</head>
<body>
<div id="gg">
<input type="button" value="x"/>
</div>
</body>
</html>
up_image.html
图片显示，隐藏，移动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: red;
/*动画基于定位*/
position: relative;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function f1() {
$("#d1").show(3000);
}
function f2() {
//第2个参数是函数,该函数在动画结束时被调用.
//这样的函数我们称之为回调函数.
//回调函数:逻辑完成后自动调用的函数.
$("#d1").hide(3000,function(){
console.log("OVER");
});
//动画底层的实现原理:
//通过定时器不断的修改元素的样式就是动画.
//定时器相当于线程,所以动画方法相当于启动
//了支线程,当前方法f2相当于主线程,二者并发
//执行.主线程f2启动支线程后不等待,立刻执行
//下一行代码,而支线程3秒后才执行完成.
console.log("over");
}
$(function(){
$("#d1").hover(
function(){
$(this).animate({"left":"20px"},500);
},
function(){
$(this).animate({"left":"0"},500);
}
);
});
</script>
</head>
<body>
<p>
<input type="button" value="显示"
onclick="f1();"/>
<input type="button" value="隐藏"
onclick="f2();"/>
</p>
<div id="d1"></div>
</body>
</html>
Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM的更多相关文章
-
JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
-
Jquery选择器，操作DOM
刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...
-
jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
-
23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
-
第八章 使用jQuery操作DOM
DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...
-
一周一话题之四（JavaScript、Dom、jQuery全面复习总结<;jQuery篇>;）
-->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...
-
jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别
$(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...
-
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
本篇文章主要是对jQuery(function(){})与(function(){})(jQuery)之间的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Jquery是优秀的Javas ...
-
jQuery(function(){})与(function(){})(jQuery)的区别
jQuery(function(){ });/$(function(){ });全写为 $(document).ready(function(){}); 意义为在DOM加载完毕后执行了ready()方 ...
-
Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别
Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数. $(document).ready(function(){ // 在这里写你的代码... ...
随机推荐
-
WCF学习系列四--【WCF Interview Questions – Part 4 翻译系列】
WCF Interview Questions – Part 4 This WCF service tutorial is part-4 in series of WCF Interview Qu ...
-
[No000088]并行循环vs普通循环
using System; using System.Collections.Generic; using System.Threading; using System.Threading.Tasks ...
-
Android Drawable资源
Android实现应用d动画效果:比如App第一次打开的开始动画等 有两种:GIF动画和代码实现. 第一种:借助于Gif制作工具软件实现.一般是和第三方开源的GifView(https://githu ...
-
VC ClistCtrl不同行背景色
大家经常用到listctrl 做表格 为了好看,要给每行设置不同背景色.很实用的一个小技巧. 1:首先在.h里添加以下消息 afx_msg void OnDrawColorForMyList(NMHD ...
-
[转]epoll技术
在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll. 相比于select,epoll最大的好处在于它不会随着监听fd数目 ...
-
linux 端口占用情况
1,查看8010端口是否被占用 [root@cloud ~]# netstat -an|grep 8010 tcp 0 0 0.0.0.0:8010 0.0.0.0:* LISTEN 2,查看8010 ...
-
Spring MVC 的@RequestParam注解和request.getParameter(";XXX";)
在SpringMVC后台控制层获取参数的方式主要有两种,一种是request.getParameter("name"),另外一种是用注解@RequestParam直接获取.这里主要 ...
-
Ruby之Rspec的报错解决
#enconding:utf-8 require 'selenium-webdriver' require 'rspec' describe "baidu main page" d ...
-
gulp的使用方法
---恢复内容开始--- 什么是gulp? Gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. 使用步骤: 1.全局安装gulp: npm install - ...
-
[转载]Windows网络编程系列教程之四：Select模型
原文:http://www.51see.com/asp/bbs/public/bp_show.asp?t_id=200308131152297103 讲一下套接字模式和套接字I/O模型的区别.先说明一 ...