老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html

day43,day44

jquery 中文文档:http://jquery.cuishifeng.cn/

首先我们得下载一个jquery文件 jquery-3.1.1.js,然后工程引入

<script src="jquery-3.1.1.js"></script>

jquery的基础语法:$(selector).action()

selector 是选择器

jQuery 是什么

<1>jQuery 由 John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

<4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择

什么是jQuery对象:
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script> <div class="div1">hello world</div>
<script>
$(".div1").css("color","red")
</script>
</body>
</html>

寻找元素(选择器和筛选器) 

3.1 选择器

3.1.1 基本选择器

$("*")                匹配所有标签
$("#id") 匹配id标签
$(".class") 匹配类标签
$("element")      按照标签名字找,比如${"span"}
$(".class,p,div") 匹配多种类型的标签 $(selector) 这个拿到的是一个对象,比如有多个同名class标签,拿到的就是一个数组

3.1.2 层级选择器

$(".outer div")    后代选择器(outer 下的 div标签,影响所有的后代)
$(".outer>div") 子代选择器(只影响子代)
$(".outer+div") 紧挨着的兄弟,且是向下的
$(".outer~div") 兄弟标签,且是向下的,不用紧挨着(同级别中间隔了别的标签也可以)

3.1.3 基本筛选器

$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)") <ul> <li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
// $("li:first").css("color","red") //第一个
// $("li:eq(3)").css("color","red") //这里eq是从0-4
// $("ul li:even").css("color","red") //选中所有的基数
$("ul li:lt(2)").css("color","red") //index小于2(也就是0,1)
// $("ul li:gt(1)").css("color","red") //第二个以后的都选中
//    $("ul li").gt(1).css("color","red")   //推荐用这种,上面的所有筛选器都可以用 . 的方式,比如$("ul li").last 等等
</script>

3.1.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script> <!--<div class="div1">hello world</div>-->
<!--<script>-->
<!--$(".div1").css("color","red")-->
<!--</script>--> <p id="s1" bigbao="xxx">hello world</p>
<p id="s2" bigbao="xxx">hello world</p> <script> // $('[bigbao="xxx"]').css("color","red") // 自定义属性bigbao=‘xxx’的全部选中
$("[bigbao='xxx'][id='s1']").css("color","red") //选中id为s1,且自定义属性bigbao的值是xxx的 </script> </body>
</html>

3.1.5 表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script> <input type="text">
<input type="submit"> <script> $(":text").css("width","300px") </script>
</body>
</html>

  

查找筛选器*****

 $("div").children(".test") #只找到子代
$("div").find(".test") #找到后代中所有的 .test $(".test").next() 下一个标签
$(".test").nextAll() 后面所有的
$(".test").nextUntil(“#end”) 直到id为end的标签结束 $("div").prev() 上一个标签
$("div").prevAll() 上面所有的
$("div").prevUntil("#start") 上面直到id为start的结束 $(".test").parent() 第一层父亲
$(".test").parents() 所有的祖先
$(".test").parentUntil() 所有祖先,逐级向上,直到什么时候结束 $("div").siblings() 除了自己,找到其他相邻的

$("ul li").hasclass("test")  判断某一个标签内是不是含有class=test的筛选器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1"></div> <script src="jquery-3.1.1.js"></script>
<script>
console.log($("div").hasClass("div1"))
</script>
</body>
</html>

  

实例:左侧菜单

实现点击母菜单按钮,罗列子菜单,其他菜单隐藏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 100%;
height: 100%; }
.menu{
float: left;
background-color: #2f4050;
/*background-color: white;*/
width: 15%;
height: 1000px;
font-size: 13px;
color: whitesmoke; }
.content{
float: left;
background-color: antiquewhite;
width: 83%;
height: 1000px;
margin-left: 10px;
}
.title{
background-color: yellowgreen;
line-height: 30px;
text-align: center;
}
.hide{
display: none;
}
</style> </head>
<body>
<script src="jquery-3.1.1.js"></script> <div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">用户管理</div> <!-- onclick 绑定的函数 传参数 关键字this,点击后直接获取到本次点击的对象,然后传给show函数 -->
<div class="con">
<div>查看用户组</div>
<div>查看用户</div>
</div>
</div>
<div class="item ">
<div class="title" onclick="show(this)">资产管理</div>
<div class="con hide">
<div>查看资产组</div>
<div>查看资产</div>
<div>查看机房</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">授权管理</div>
<div class="con hide">
<div>Sudo</div>
<div>系统用户</div>
<div>授权</div>
</div>
</div>
<div class="item ">
<div class="title" onclick="show(this)">上传下载</div>
<div class="con hide">
<div>文件上传</div>
<div>文件下载</div>
</div>
</div>
</div>
<div class="content"></div> <script>
function show(self) { // 这里的self 就是点击的标签对象,我们要取消点击标签的hide,其他标签添加hide属性,我们先找到我们点击标签的parent,然后利用parent的siblings,再找到他们的孩子的con标签
$(self).next().removeClass("hide"); //
$(self).parent().siblings().children(".con").addClass("hide"); //这里有hide就不添加,没hide就添加
}
</script>
</div>
</body>
</html>

  

前端学习-jQuery的更多相关文章

  1. 前端学习——JQuery Ajax使用经验

    0.前言     在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...

  2. 前端学习——jquery操作例子

    一.jquery和DOM函数的转换 . jquery转换成dom $(] . dom转换成jquery var i1=documen.getElementById('#i1')---------> ...

  3. 前端学习☞jquery

    一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...

  4. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  5. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  7. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

随机推荐

  1. asp.net结合html使用

    在用asp.net开发系统时,用控件能更方便快捷,但是大家也知道用它的控件会导致不可控,特别是css,如何用前端定义的html+css+js来运用asp.net(c#)呢,下面写了一个小实例,实现页面 ...

  2. OSPF补全计划-1

    OSPF全称是啥我就不絮叨了,什么迪杰斯特拉,什么开放最短路径优先算法都是人尽皆知的事儿,尤其是一提算法还会被学数据结构的童鞋鄙视,干脆就不提了,直接开整怎么用吧.(不过好像真有人不知道OSPF里的F ...

  3. Eclipse纯净版安装web插件

    打开 Help -> Install New Software. 在Install界面板中,点击Add按钮输入:然后在输入http://download.eclipse.org/releases ...

  4. [CF453B]Little Pony and Harmony Chest

    [CF453B]Little Pony and Harmony Chest 题目大意: 给你一个长度为\(n(n\le100)\)的正整数序列\(A(A_i\le30)\),求一个正整数序列\(B\) ...

  5. [CTSC2017]吉夫特

    Description: 给定一个序列\(a_1,a_2,a_3...a_n\) 求有多少个不上升子序列: \(a_{b1},a_{b_2}...\) 满足 \(C_{a_{b1}}^{a_{b2}} ...

  6. 2017.07.14【NOIP提高组】模拟赛B组

    Summary 这次比赛因为迟到了,少了很多时间,也受到了相应的惩罚,这是好的,是个标记牌,警醒着我.这次比赛的题目很难,也就是说,大家的得分都很低,总的来说,收获还是很大的,因为有非常多的技巧被掌握 ...

  7. svn提交后 添加注释

    svn 提交后添加注释 第一步: 第二步: 第三步:提交就可以了. 注意:如果svn服务器管理员没有激活pre-revprop-change这个hook,会出现 需要让svn服务器管理员没有激活pre ...

  8. unity 动画无法正常播放Animation的动画问题

    1,百度得来的一种方案,留作备用: 有一个区别的地方在于新建动画之前,选中物体身上有无Animation组件: 1.没有的话,选中物体,打开Animation窗口,新建,会出现一个animation一 ...

  9. python之迭代器篇

    一.迭代器 只要对象本身有_iter_()_方法,那它就是可迭代的 执行__iter__就会生成迭代器 迭代器有__next__用于获取值 __next__超出界限了会报StopIteration异常 ...

  10. Oracle ORA-12541,ORA-12514错误

    1.昨天发布tomcat 成功,但登录后报错,无法打开hibernate session,检查后发现数据库无法连接 2.用PL/SQL登录数据库,报 ora-12541,TNS 无监听程序,百度发现需 ...