jQuery recap

jQuery
- jQuery选择器
- Traverse
- jQuery托管（host jQuery）
- jQuery method
- - DOM manipulation
  - 插入元素
- 事件监听(event listeners)
- - 监听鼠标：monitorEvents($0)
  - 监听按钮
jplayer

jQuery

jQuery是一个javascript库，不包含任何的魔法。$相当于jQuery的指针，实质就是一个函数。使用jQuery可以轻松的访问DOM树，如$('div')可以访问div标签元素。获取页面上所有的<li>标签。jQuery会给网页增加几千字符，一定程度上会减缓网页加载速度，但是鉴于可以从中获得的语法糖(syntactial sugar)，为网页添加它还是值得的。

var listElements;
listElements =$('li'); // your code goes here!
console.log(listELements);

jQuery选择器

$('tag')选择标签元素
$('.class')选择类元素,class是类元素中想选择出的值。
$('#id')选择ID元素。
jQuery selectors

Traverse

https://api.jquery.com/category/traversing/

var articleList,h1,kids,parents;
articleList=$('.article-list');
h1=articleList.siblings('h1');
kids=articleList.find('*'); // *是找到所有的子节点
parents=articleList.parents('div');
console.log(h1,kids,parents);

使用选择器也可以找到DOM树中的父节点、子节点和兄弟节点，根据对应关系节点数量是一个还是多个，分别调用不同的函数。

jQuery托管（host jQuery）

jQuery有三种托管方式：
1.本地。即将jQuery文件存储在服务器上引入。
2.官方。
3.内容分发网络(CDN),如谷歌等，这种方式是比较建议的方式，其优点是CND一般比服务器速度更快，且更利用浏览器的缓存特性。
在开发中使用精简版的jQuery.min，文件体积更小。

jQuery method

jQuery 方法API

DOM manipulation

$('#item').addClass('blue')
#给id为item的元素添加了类blue

文档中方括号表示参数是可选的。

toggleClass()
对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
例子如下，下面这段html代码中<li>元素的class包含article-item和featured两类，之后用toggleClass方法删除featured类。

                <li class="article-item featured"><header>Article #2</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!</p><p>Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.</p></li>

var featuredArticle;
featuredArticle =$('.featured'); #首先定义类选择器选择对应类
featuredArticle.toggleClass('featured'); #用toggleClass方法删除

next()
获取最近的下一个兄弟节点。下面代码示例了增删featured类的操作。

var article2, article3;
article2=$('.featured');
article3=article2.next(); //获取下一个兄弟节点
article2.toggleClass('featured'); //本来有featured这一类所以toggle后删除
article3.toggleClass('featured'); //本来没有featured这一类所以toggle后添加

attr()
attr有两种方法签名（method signatures),第一个签名是传入一个属性名的字符串，可以得到它的值。第二个签名是通过在第二个参数中传入字符串来设置一个属性名的值。

var navList,firstELe,firstA;navList =$('.nav-list'); //选择nav-list对应的元素
firstEle=navList.children().first();//<a>是<ul >下属的子元素，first获取对应的第一组子元素，包含<li>和<a>在内
/*易迷惑的点是多个li元素即下面的a元素视为独立的多个元素，实际是算一组*/
firstA=firstEle.find('a'); //在第一组子元素中找到a元素
firstA.attr('href','#1');

first()
针对jQuery对象是包含许多元素的集合的情况，first()方法可以取出集合中的第一个元素。
css()
使用javascript修改css意味着内嵌CSS，这一点需要注意。css()方法与attr()方法类型，也有两种方法签名，第一种签名允许获取属性值，第二种签目设置属性和属性值。

var articleItems;
articleItems =$('.article-item');// your code goes here!
articleItems.css('font-size','20px');

修改文档值
on()将一个或多个事件绑定在选择的选择的元素上。
val()获取当前匹配元素中的第一个元素的值或者设置匹配的元素的值。
html()获取或修改对应元素的内容。
text()获取或设置元素的内容。

$('#input').on('change', function() {var val,h1;val =$('#input').val();h1=$('.atricles').children('h1');// 类为article的div元素下的h1子元素h1.text(val);// 输入的val赋值给h1.text// Your code goes here!
});

插入元素

append()是在元素末尾插入新元素，prepend()是在元素前面插入新元素。insertBefore()是在前面插入相邻元素，insertAfter()是在后面插入相邻元素。

var family1,family2,bruce,madison,hunter;
family1=$('#family1');
family2=$('<div id="family2"> <h1>family2</h1> </div>');
bruce=$(' <div id="#bruce"><h2>bruce</h2></div> ');
madison=$('div id="#madison"><h3>madison</h3></div>');
hunter=$('div id="#hunter"><h3>hunter</h3></div>');// 注意最外面是单引号，里面id值是双引号
family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madions);
bruce.append(hunter);

事件监听(event listeners)

浏览网页时点击鼠标、提交表单、点击链接等都是事件。谷歌开发者工具提供了monitorEvents(elementToWatch)函数，用于侦听指定的元素。图中console的输入代码用于监听搜索框的第一个元素输入。

监听鼠标：monitorEvents($0)

mouseover:当鼠标指针位于元素上方时，会发生 mouseover 事件。
取消监听鼠标：unmonitorEvents($0)

监听按钮

$("#my-button").on("click",function(){ /*点击时触发两个动作*/(this).remove(); //删除button属性("body").addClass("success");  #body中添加success属性
})

https://api.jquery.com/category/events/
on method
on方法也有对应的很多简单的函数封装可以调用。

jplayer

jplayer是网页端播放视频、音频的jQuery库。The jQuery HTML5 Audio / Video Library
http://www.jplayer.org/
最简单的视频播放实现：

<script type="text/javascript">$(document).ready(function(){$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {m4a: "/media/mysound.mp4", #视频链接地址oga: "/media/mysound.ogg" #ogg文件});},swfPath: "/js",supplied: "m4a, oga"});});
</script>
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1"><a href="#" class="jp-play">Play</a><a href="#" class="jp-pause">Pause</a>
</div>

jQuery-常用知识recap相关推荐

jquery常用知识
jQuery 什么是jq 官网:https://jquery.com/ 定义:jquery是一个快速.小型和功能丰富的javascript库.发展历程:2006 特点: 1.隐式迭代 2.链式编程 j ...
jQuery基础知识整理
jQuery基础知识整理 jQuery简介什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
java js 速度慢,java js 速度慢jQuery常用知识点总结以及平时封装常用函数
本文为大家介绍了jQuery中常用知识点及函数,包含许多细节方面的知识,下面我们一起学习一下. jQuery中为我们提供了很多有用的属性,自己总结的一些常用的函数.个人认为在在线排盘开发中会比较常用的 ...
python中pandas格式_Python学习笔记之数据分析中Pandas常用知识
前言 Pandas基于两种数据类型:series与dataframe. 一个series是一个一维的数据类型,其中每一个元素都有一个标签.series类似于Numpy中元素带标签的数组.其中,标签可以 ...
Apache的压力测试以及web性能优化的常用知识总结
这篇文章主要介绍了Apache的压力测试以及web性能优化的常用知识总结,笔记由<构建高性能web站点>这本高人气书籍整理而来,需要的朋友可以参考下什么是带宽? 误解:"数据 ...
Oracle常用知识
文章目录 Oracle常用知识创建临时表空间创建数据表空间创建用户并指定表空间修改用户默认表空间查询用户以及用户对应的表空间查询当前用户的所有表及表空间为用户授予权限查看当前用户权限 ...
jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
光模块、连接器、光纤的常用知识
光模块的常用知识以太网交换机常用的光模块有SFP,GBIC,XFP,XENPAK.它们的英文全称,中文名不常用,可以简单了解下 SFP: Small Form-factor Pluggable tr ...
JQuery常用的代码片段
2019独角兽企业重金招聘Python工程师标准>>> JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到.他简易的操作以及对各个浏览器的兼容性,被广大的开发者一致 ...
网络基础：计算机网络由基础到深入常用知识集锦！
网络技术的发展给社会带来了诸多益处,随着网络的广泛应用,网络给我们带来便利的同时,网络故障也时有发生.本文探讨了计算机网络中常见的网络问题及计算机网络维护方法,保证计算机网络运行稳定. 在日常使用过程 ...

jQuery-常用知识recap