JQuery学习总结【一】
JQuery学习总结【一】
一：JQuery
1 JQuery知识
*：就是让我们学会调用JQ插件，其实内部就是对JS的封装。
*：jquery里面有三个文件，
第2个和第3个其实里面的内容是一样的，只是第三个对其进行了压缩，使浏览器对其的访问时间变短。
我们在使用的时候将Jquery-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其实vsdoc.js是对于前面的解释说明，它是让我们在编写代码的时候可以点操作出来。
*:练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使文字一行一行消失》(“$”这个其实是个函数)
<head>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function () { alert($("#un").val()); });//点击弹出内容
$("div").click(function() { $(this).hide("slow"); });//文字消失
});
</script>
</head>
<body>
<input type="text"id="un"/>
<input type="button" id="btn"/>
<div>文字内容</div>
</body>
2 JQuery里面的Ready 《在网页刚开始就弹出内容》
$(dounction).ready(function(){alert(“加载完毕”);})
其实还可以这样子写
$(function(){alert(“加载完毕”);});
<解析：”$”这个函数将匿名函数function()注册为Ready执行。>
3 jquery内置函数
.map(array,fn)对数组中array中的每一个元素调用fn函数进行处理，fn函数将处理返回，最后得到一个新的数组。.map(array,fn)对数组中array中的每一个元素调用fn函数进行处理，fn函数将处理返回，最后得到一个新的数组。map不能处理Dictionary风格的数组。要用下面的$.each来处理。
$.each(array.fn)对数组arr每个元素调用fn函数进行处理，没有返回值。
var arr=[3,5,7];
Var arr2=$map.(arr,function(item){return item*2}) 函数式编程。
Var arr={“tom”;”檀木”,”xiaozhang”;”小张”}
$.each(arr,function(key,value){alert(key+”=”+value);});
4 JQuery对象，Dom对象
<dom就是浏览器的一些标记，比如层，按钮，标签等，数组是jq的对象。>
Jquery对象就是通过jquery包装Dom对象后产生。而且jquery对象只能调用jquery对象封装的方法。不能调用Dom对象的方法。
$(function(){$(“#id”).css(“background”,”red”)});
上面的代码是复制，就是将背景色设置为红色，若.css中的属性为一个则为得到值，2个即为设置值。
5 jquery选择器
*id选择器
$(“#div”).html();
*TabName选择器<标签选择器>
$(“div”).click(function（）｛alert(“你好我是p”);｝);
这里就是将网页中所有的div标签都选择了，都向其添加了click事件。
* css选择器
同时选择多个样式，就是给制定样式的添加。
$(“div”).click(function(){alert(“这是信息”)});
6 多条件选择器/层次选择器
7 jquery的迭代
就是里面的错误程序不会给提示出错，我们自己要添加if/elae语句进行判断。
8 jquery的节点遍历
就是运用next（）,nextall()方法来进行遍历的。就好像在数组那里的遍历是一样的。 这里只是得到它的下一个元素的值。
Siblings()：获取所有元素的同辈元素(兄弟节点)。
*:jquery的链式编程
$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});
就是很容易的通过点操作符来操作。
//这里是链式操作,减少了使用if/else等操作。改变了编程风格。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tables td").html("<img src='images/1.jpg'/>")
.mouseover(function () {
$("#tables td") .html("<img src='images/1.jpg'/>");
$(this).nextAll().html("<img src='images/2.jpg'/");
});
});
</script>
</head>
<body>
<table id="tables">
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
9 ：基本的过滤器
这里可以将其写在一起，比如选择器和过滤器，这样子就会很强大。
不仅可以使用选择器进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素。
案例：
（相对定位）
：这里的元素就是在定位#tables tr 下的td的定位
10 属性过滤器
Eg：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("input[value=显示选中的内容]").click(function() {
alert($("input:checked").val());
});
});
</script>
</head>
<body>
<input type="checkbox" value="上海"/>上海<br/>
<input type="checkbox" value="宝鸡"/>宝鸡<br/>
<input type="checkbox" value="深圳"/>深圳<br/>
<input type="checkbox" value="西安"/>西安<br/>
<input type="checkbox" value="北京"/>北京<br/>
<input type="submit" value="显示选中的内容"/>
</body>
</html>
11 元素的each <通过一些过滤器和选择器来遍历each一些元素。>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("input[name=names]").click(function() {
var arr = new Array();
$("input[name=names]:checked").each(function (key, value) {
arr[key] = $(value).val();
});
$("#msgNames").text("共选中"+arr.length+"项:"+arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="张辉"/>张辉
<input type="checkbox" name="names" value="妈妈"/>妈妈
<input type="checkbox" name="names" value="妈妈"/>妈妈
<input type="checkbox" name="names" value="妈妈"/>妈妈
<p id="msgNames"></p>
</body>
以上就是本文的全部内容，希望对大家有所帮助，下篇文章继续介绍JQuery基本知识--JQuery学习总结【二】，有兴趣的朋友可以看下。谢谢对我们的支持！
相关推荐
-
详解jQuery的Cookie插件
一.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件. 特别提醒,今日发现一个特别的错误,google浏览器提示:has no method $.cookie.火狐浏览器提示:$.cookie is not a function;调试了半天,终于找到原因,如果同一个页面两次或者多次引入jQuery插件就会报此错误. 使用方法: 1.引入jQuery与jQuery.Cookie.js插件. <script src="jQuery.1.8.3.js" type=
-
jquery结合html实现中英文页面切换
目的:前端(只采用thymeleaf模板+jquery) 实现国际化 由:前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量 采用jquery赋值(维护2个模板(中,英)界面) 直接out 方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件 a jQuery plugin that makes it easy to internationalize your web site 步骤: 1
-
jQuery select自动选中功能实现方法分析
本文实例分析了jQuery select自动选中功能实现方法.分享给大家供大家参考,具体如下: //筛选 var typeid = "<!--{$typeid}-->"; var bigclassid = "<!--{$bigclassid}-->"; var smallclassid = "<!--{$smallclassid}-->"; $("#typeid option[value="
-
Javascript基于jQuery UI实现选中区域拖拽效果
一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script
-
jQuery获取this当前对象子元素对象的方法
如下所示: <select id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> $(function(){ $("
-
解析jQueryEasyUI的使用
使用EasyUI最好的方法不是学会,所有的东西都敲一遍,你也没办法敲得完,而是找到一个好的文档. http://xiazai.jb51.net/201611/yuanma/jQueryEasyUI(jb51.net).rar jQueryEasyUI的使用方法其实非常简单.在第一次使用中,也还是碰到了些问题,特地做了一个简单的示例,然后复制过来文档. 页面代码: <html> <head> <title>jQuery EasyUI学习</title> <
-
jQuery Checkbox 全选 反选的简单实例
1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script> <script type="text/javascript"
-
jQuery实现发送验证码并60秒倒计时功能
本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma
-
实例解析jQuery工具函数
一.$.browser对象属性 属性列表 说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关浏览器则返回true,否则返回false,如火狐 safari safari相关浏览器则返回true,否则返回false,如safari opera opera相关浏览器则返回true,否则返回false,如opera msie msie相关浏览器则返回true,否则返回false,如IE,360,搜狗
-
JQuery学习总结【二】
一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. *:document方法 1:.val()可以获取到文本框里面的值,若括号里面有值则直接为赋值. Eg:加法计算器 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
-
jquery实现点击页面回到顶部
a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid