jQuery-常用知识recap

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>