JS基础（四）之jQuery
31、jQuery(http://jquery.com/)是一个快速、简洁的JavaScript框架。
- 它封装了JavaScript常用的功能代码，提供一种便捷的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery主要包括jQuery Core(核心库)、jQuery UI(界面库)、Sizzle(CSS选择器)、jQueryMobile(jQuery移动版)和QUnit(测试套件)5个部分
32、jQuery特性
- 优雅的语法规则：发生在同一个jQuery对象上的一组动作，可直接连写，无需重复获取对象
- 框架封闭：jquery只建立一个名为jQuery的对象，其所有的方法都建立在这个对象之下
- 封装繁琐的底层技术：jQuery定义了大量的方法，还封装了大量的事件处理函数，是的jQuery处理事件绑定非常稳定；将所有的Ajax操作封装到一个函数$.ajax()中
- 自成体系：完全摆脱JavaScript的设计模式，允许用户在jQuery环境下跳动jQuery函数选择相关匹配元素，然后直接在jQuery对象上完成操作而无需在jQuery和JavaScript两种设计模式中来回切换
33、jQuery构造器
jQuery构造器即jQuery()函数，简写为$()，可以接收4个类型的参数
$(function(){
var red = $("p span"); //选择元素中包含的span元素，并返回该元素的jQuery对象引用指针
red.css("color","red"); //调用jQuery对象的css()函数，定义选取对象的CSS样式，其中第1个参数表示CSS属性名，第2个参数表示CSS属性值。
})
</script>
<script>
$(function(){
$("<div><span>文本块3</span></div>").appendTo("body");//HTML代码段
})
</script>
<script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
<script>
$(function(){
$("span").css("font-size","12px");//把元素转化为jQuery对象，在调用jQuery方法
})
</script>
<script>
$(function(){
alert("Hello World!");//jQuery绑定函数
});
</script>
<script>
$(function(){
var span = document.getElementsByTagName("span")[]; //获取节点对象，此时返回DOM元素对象
var span = $(span); //把DOM对象转换为jQuery对象
span.css("color","red"); //调用jQuery对象的css()方法定义字体颜色为红色
});
</script>
<script>
$(function(){
var span = $("span")[]; //把jQuery对象转换为DOM对象
span.style.color = "blue"; //调用DOM对象的style属性，设置字体颜色为蓝色
});
</script>
34、jQuery基本用法
<script>
$(function(){
var li = $("li");
li.each(function(n){
this.style.fontSize = - n* +"px";//$(this).css("font-size",30- n*2 +"px");
if(n==) return false;
});
})
</script>
<script>
$(function(){
var li = $("li");
alert(li.size()); //返回值为10
alert(li.length); //返回值为10
})
</script>
<script>
$(function(){
var li = $("li").get().reverse(); //把当前jQuery对象转换为为颠倒的DOM集合
var ol = $("ol").html(li);
})
</script>
<script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
<script>
$(function(){
var li = $("li");
var temp = $("li:contains('陆 游')");
alert(li.index(temp));
})
</script>
</head>
<body>
<h1>宋词排行榜 </h1>
<ol>
<li>苏 轼《念奴娇·赤壁怀古》</li>
<li>岳 飞《满江红·怒发冲冠》 </li>
<li>李清照《声声慢·寻寻觅觅》 </li>
<li>苏 轼《水调歌头·明月几时有》 </li>
<li>柳 永《雨霖铃·寒蝉凄切》 </li>
<li>辛弃疾《永遇乐·千古江山》 </li>
<li>姜 夔《扬州慢·淮左名都》 </li>
<li>陆 游《钗头凤·红酥手》 </li>
<li>辛弃疾《摸鱼儿·更能消》 </li>
<li>姜 夔《暗香·旧时月色》 </li>
</ol>
<script>
$(function(){
var href = $("a").attr("href");//只显示第一个值
alert(href);
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com/" target="_blank">百度</a></li>
<li><a href="http://www.sohu.com/" target="_self">搜狐</a></li>
<li><a href="http://www.sina.com.cn/" target="_top">新浪</a></li>
<li><a href="http://www.qq.com/" target="new">腾讯</a></li>
</ul>
<script>
$(function(){
var href = $("a:contains('搜狐')").attr("href");
alert(href);
})
</script>
<script>
$(function(){
$("a").each(function(){
$(this).attr("title",this.innerHTML + "（" + $(this).attr("href") + "）" );
});
})
</script>
<script>
$(function(){
$("a").attr("title", function(){//增加属性
return this.innerHTML + "（" + $(this).attr("href") + "）" ;
});
})
</script>
<script>
$(function(){ //增加多个属性
$("img").attr({width:"",height:"",title:"这是一个示例",alt:"示例图像"});
})
</script>
<script>
$(function(){
$("img").removeAttr("width");//删除指定属性
})
</script> <script>
$(function(){ //定义类样式
$("p").addClass("red");//$("p").attr("class","red");
})
</script>
<script>
$(function(){
$("li").each(function(){ //遍历jQuery对象内所有对象
this.onmouseover = function(){ //为当前元素注册鼠标经过时的事件
$(this).toggleClass("bg"); //开关背景样式类（bg）
}
this.onmouseout = function(){ //为当前元素注册鼠标移开时的事件
$(this).toggleClass("bg"); //开关背景样式类（bg）
}
this.onclick = function(){ //为当前元素注册鼠标单击时的事件
$(this).toggleClass("bg1"); //开关背景样式类（bg1）
}
});
})
</script> <body>
<p>段落文本<span></span></p>
<script>
alert($("p").text());//输出段落文本1，忽略span标签
</script>
</body>
<body>
<p>段落文本<span></span></p>
<script>
$("p").text("<img src='images/1.jpg' width='100' />");//替换文本 输出<img……>
</script>
</body>
<body>
<p>段落文本<span></span></p>
<script>
alert($("p").html());//输出 段落文本<span>1</span>
</script>
</body>
<body>
<p>段落文本<span></span></p>
<script>
$("p").html("<img src='images/1.jpg' width='100' />");//输出 图片
</script>
</body>
<body>
<input type="text" value="文本框" />
<input type="radio" value="单选按钮" />
<input type="checkbox" value="复选框" />
<input type="hidden" value="隐藏域" />
<input type="submit" value="提交按钮"/>
<script>
alert($("input").val());
alert($($("input")[]).val()); //显示单选按钮的值
alert($($("input")[]).val()); //显示复选框的值
alert($($("input")[]).val()); //显示隐藏域的值
alert($($("input")[]).val()); //显示提交按钮的值
</script>
</body>
<body>
<select multiple="multiple">
<option value="">选项1</option>
<option value="" selected="selected">选项2</option>
<option value="" selected="selected">选项3</option>
</select>
<script>
alert($("select").val());//输出 2,3
</script>
</body>
<body>
<input type="text" />
<script>
$("input").val("文本框的值");//为文本框赋值 文本框的值
</script>
</body>
<body>
<input type="radio" value="radio1" />单选按钮1
<input type="radio" value="radio2" />单选按钮2<br>
<input type="checkbox" value="check1" />复选框1
<input type="checkbox" value="check2" />复选框2<br>
<select multiple="multiple">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
<script>
$("input").val(["radio2","check2"]);//单选按钮和复选框必须要使用数组来传递值
$("select").val(["",""]);//下拉菜单可以不用数组传递值
</script>
</body>
35、选择器和过滤器
<script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
<script>
$(function(){
$("#p1"); //ID选择器
$("#box1 p"); //包含选择器
$("#box1>#p1"); //子选择器
$("p#p1"); //指定标签选择器
$("p[id='p1']"); //匹配属性等于特定属性值
$("[id$='1']"); //匹配属性值结尾的值
$("#box1 [id^='p']"); //包含选择器，配合匹配属性值开始的值
$("[id*='1']"); //匹配属性值包含某个字符串
})
</script>
<script>
$(function(){
var $temp = $("li");
$temp.css("color","red");//类选择器
})
</script>
<style type="text/css">
</style>
</head>
<body>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li class="l3">列表项3</li>
<li></li>
</ul>
</body>
<script>
$(function(){
$("div:hidden").css("display","block");//使隐藏元素显示出来
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div>盒子1</div>
<div style="display:none">盒子2</div>
<div><p>盒子3</p></div>
</body>
<script>
$(function(){//表单选择器，:input匹配input、select、button、textarea元素
$("input:text").css("border","solid 1px red");
$("input:checkbox").css("border","solid 1px red");
$("input:radio").css("border","solid 1px red");
$(":image").css("border","solid 1px red");
$(":file").css("border","solid 1px red");
$(":submit").css("border","solid 1px red");
$(":reset").css("border","solid 1px red");
$(":password").css("border","solid 1px red");
$(":button").css("border","solid 1px red");
})
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="text" value="文本框" />
<input type="checkbox" value="复选框" />复选框
<input type="radio" value="单选按钮" />单选按钮
<input type="image" src="data:images/1.jpg" value="图像按钮" />
<input type="file" value="文件域" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="password" value="密码域" />
<input type="button" value="普通按钮" />
<select>
<option value="下拉菜单">下拉菜单</option>
</select>
<textarea>文本域</textarea>
<button>按钮</button>
</form>
</body>
<script>
$(function(){//过滤器是函数
var divs = $("div");
divs.eq().css("color","red");//索引值为0 即第一个div元素
divs.filter(".red,#box1").css("color","red");//过滤出满足匹配条件的div元素
divs.slice(,).css("color","red");//使用slice函数进行过滤
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div>盒子1</div>
<div id="box1">盒子2</div>
<div class="red">盒子3</div>
</body>
36、文档处理、css处理
<script>
$(function(){
$("div").append("<span style='color:red'>套子</span>");//span标签放在div标签里，盒子后
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div>盒子</div> </body>
<script>
$(function(){
$("p").appendTo("#box");//p放在div里，div内容后
$("p").prepend($("#box")[]);//div放在p里，p内容前
$("p").prependTo($("#box")[]);//p放在div里，div内容前
})
</script>
<script>
$(function(){
$("div").after($("p"));
$("div").before($("p"));
$("div").insertAfter($("p"));
$("div").insertBefore($("p")); })
</script>
<style type="text/css">
</style>
</head>
<body>
<p>段落</p>
<div id="box">盒子</div>
</body>
<script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
<script>
$(function(){
$("a").wrap(document.getElementsByTagName("li")[]);// $("a").wrap("<div></div>");//为每个a元素包裹一层li元素
$("li").wrapAll(document.getElementsByTagName("ul")[]);//为所有的li元素包裹一个ul元素
$("li").wrapInner("<span></span>");//为每个li元素内嵌一层span元素
})
</script>
<style type="text/css">
</style>
</head>
<body>
<a href="#">超链接1</a><a href="#">超链接2</a><a href="#">超链接3</a>
</body>
<script>
$(function(){
$("span").replaceWith("<div>盒子</div>");//输出 <div>盒子</div><div>盒子</div><div>盒子</div>
$("span").replaceAll("div");//与上相反
})
</script>
<style type="text/css">
</style>
</head>
<body>
<span>包子</span><span>包子</span><span>包子</span>
</body>
<script>
$(function(){
$("div").click(function(){
$(this).css("color","red");
}).clone(true).appendTo("p");//克隆事件添加到p标签里 段落文本之后
$("span").click(function(){
$(this).css("color","red");
})
var span=$("span").remove();// remove()删除元素不保留事件 单击不变色
$("p").prepend(span);//span元素剪切到span元素里 段落文本之前 /*
var span=$("span").detach();
$("p").prepend(span);//detach()删除元素保留事件 单击span变红
*/
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div>盒子1</div>
<p>段落文本3</p>
<span>span</span>
</body>
<script>
$(function(){
$("p").css({//CSS属性名可以不加引号，但是对于复合属性名，则必须增加引号
color:"blue",
"font-size":"14px",
"background-color":"red"
});
$("p").css("border","solid 1px blue");
alert($("p").css("border")); })
</script>
<style type="text/css">
</style>
</head>
<body>
<p>段落1</p><p>段落2</p>
</body>
<script>
$(function(){
$("p:last").offset({
left:,
top:
});
var offset = $("p:last").offset();
alert( "左侧距离: " + offset.left + ", 顶部距离: " + offset.top );
})
</script>
<script>
$(function(){
var div = $("div");
$("p").html("innerHeight=" + div.innerHeight() + "<br> outerHeight=" + div.outerHeight());//输出innerHeight=199.8
outerHeight= })
</script>
<style type="text/css">
div{
width:100px;
height:100px;
padding:50px;
border:solid 50px red;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
37、事件处理、动画处理
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script>
window.onload=function(){
alert("页面加载完毕4！");
}
window.onload=function(){
alert("页面加载完毕3！");
}
$(document).ready(function(){
alert("页面加载完毕2！");
})
$(document).ready(function(){
alert("页面加载完毕1！");
}) $(function(){
alert("页面加载完毕0！"); })
$(function(){
alert("页面加载完毕-1！"); });
function f(){
alert("页面加载完毕-2！");
}
</script>
<style type="text/css">
</style>
</head>
<body onload="f()">//2 1 0 -1 -2
</body>
<script>
$(function(){
$("div").bind("me",function(){//$('#myol li').bind('click',getHtml);$('#myol li').live('click',getHtml);$('#myol').delegate('li','click',getHtml);$('#myol li').on('click',getHtml);$('#myol').on('click', 'li',getHtml);
alert($(this).text());//live()方法已废除，bind()方法、delegate()方法都调用内部on()方法，建议使用on()方法，更快更灵活;
});
$("div").trigger("me");//默认时间和自定义事件必须由此方法来触发
/*
$("div").bind("mouseover",function(){//或者把trigger方法封装在其他事件中，借由鼠标滑入时自动触发
$("div").trigger("me");
})
*/
$("div").bind("click",function(){//绑定鼠标单击事件
alert($(this).text());
})
$("p").bind("mouseover",function(){//借由鼠标滑入触发单击事件或者直接单击也可以触发该事件
$("div").trigger("click");
})
$("input").focus(function(){
$("<span>单击一次！</span>").appendTo("body");
})
$("#ok").click(function(){
$("input").triggerHandler("focus");//triggerHander方法阻止默认事件触发，本例聚焦事件只可以由单击事件触发，不再由聚焦事件触发
})
})
</script>
<script>
$(function(){
$("p").hover(//jQuery中自定义的两个事件hover(over,out)、toggle(fn,fn)
function(){
$(this).css("color","red");
},
function(){
$(this).css("color","transparent");//恢复默认颜色
}
);
$("footer").toggle(function(){//jQuery在1.9版本中删除toggle()方法
$(this).css("color","pink");
},
function(){
$(this).css("color","transparent");
}
);
$("div").one("click",{who:"zhu"},function(event){//one()事件仅能执行一次即自动撤销
alert(event.data.who);
}); });
</script>
<script>
$(function(){
$("p").show(,function(){//只有隐藏元素才可以执行show()方法
alert($(this).text()+"显示完毕");
})
$("div").slideDown("slow");//分大小写 隐藏元素以滑动效果显示
$("h2").show(,function(){//只有显示元素才可以执行hide()方法
alert($(this).text()+"隐藏完毕");
})
$("h2").slideUp("slow");//显示元素以滑动效果隐藏
$("h3").slideToggle("slow");//隐藏元素已经显示的元素 或者显示已经隐藏的
})
</script>
<style type="text/css">
</style>
</head>
<body>
<p style="display:none">段落文本</p>
<div style="display:none">示例div元素</div>
<h2>h2示例元素</h2><br/><br/>
<h3>h3元素示例</h3> </body>
<script>
$(function(){
$("p").fadeIn("");//只能作用于隐藏元素
$("p").bind("mouseover",function(){//淡出淡入
$("p").fadeOut();
$("p").fadeIn();
$("p").fadeOut();
$("p").fadeIn();
})
$("div").fadeTo("slow",0.1,function(){
$(this).fadeTo("slow",);
})
})
</script>
<style type="text/css">
</style>
</head>
<body>
<p style="display:none">段落文本段落文本段落文本段落文本段落文本</p>
<div>雨夜，湖边风雨发作，直教人瑟瑟发抖！</div>
</body>
JS基础（四）之jQuery的更多相关文章
- node.js(基础四)_express基础
一.前言 本次内容主要包括: 1.express的基本用法 2.express中的静 ...
- JS基础四
1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是 ...
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- 前端面试题目汇总摘录（JS 基础篇）
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- js基础梳理-如何理解作用域和作用域链？
本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 前端面试题目汇总摘录（JS 基础篇 —— 2018.11.02更新）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 玩转Node.js（四）-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
随机推荐
- Flask从入门到精通之Flash消息
请求完成后,有时需要让用户知道状态发生了变化.这里可以使用确认消息.警告或者错误提醒.一个典型例子是,用户提交了有一项错误的登录表单后,服务器发回的响应重新渲染了登录表单,并在表单上面显示一个消息,提 ...
- template.js插件和ajax一起使用的例子
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. https:/ ...
- 使用图片预加载，解决断网后无法从后台获取提示网络异常的logo图片的问题
项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...
- sql server 2012 数据库日志文件过大，怎么缩小？
最近发现网站不能访问,原因数据库服务器磁盘剩余空间没了.再细查发现日志文件占用了70%,收缩日志文件失败. 在网上查找原因,是没有备份不能收缩日志文件. 临时解决的方式: 备份事务日志,再收缩日志文件 ...
- 快捷键&小技巧
shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...
- java文件上传-使用apache-fileupload组件
目前文件上传的(框架)组件:Apache----fileupload .Orialiy – COS – 2008() .Jsp-smart-upload – 200M. 用fileupload上传文件 ...
- docker 查看拉取镜像源地址
命令: cat /etc/docker/de
- Android_Activity启动模式
在android里,有4种activity的启动模式,分别为: “standard” (默认) “singleTop” “singleTask” “singleInstance” 它们主要有如下不同: ...
- JavaScript -- Constructor、Prototype
----- 012-constructor.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- jquery获取input的checked属性
1.经常需要判断某个按钮是否被选中. 2.基于jquery. <!DOCTYPE html> <html lang="en"> <head> & ...