jQery的 学习目标

jQuery的 学习目标

1.能够说出什么是 jQuery

- jQuery 是一个快速、简洁的 JavaScript 库，即倡导写更少的代码，做更多的事情。

- j 就是 JavaScript；   Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

- jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

- 学习jQuery本质： 就是学习调用这些函数（方法）。

- jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

2.能够说出 jQuery 的优点

1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程
        // 链式编程是为了节省代码量，看起来更优雅。 如:
        $(this).css('color', 'red').sibling().css('color', '');
   隐式迭代
        //隐式迭代。 遍历内部 DOM 元素（伪数组形式存储）的过程
        // 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 如:
        $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源。

3.能够简单使用 jQuery

	1.jQuery的官网 https://jquery.com/下载最新版本
	2.引入jQuery文件在文档最末尾插入 script 标签 例如:
	    <script type="text/javascript" src="../../../static/js/libs/jquery-2.1.1.min.js"></script>
	3.书写代码
        $(function () {   
        ...  // 此处是页面 DOM 加载完成的入口
    }) ; 

4.能够说出 DOM 对象和 jQuery 对象的区别

1. 用原生 JS 获取来的对象就是 DOM 对象  如:
        var boxs = document.getElementsByClassName('box');
	   //getElementsByClassName 根据类名获得某些元素集合
2. jQuery 方法获取的元素就是 jQuery 对象 如:
		var jQueryObject = $('.box');  
		//$('.box')已经获取了类名为.box的对象
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

> 注意：
	只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

5.能够写出常用的 jQuery 选择器

.1基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 

.2层级选择器

//后代选择器  注意不能获取孙子层级
$('ul>li) 
//子代选择器
$('ul li)

.3筛选选择器，在所有的选项中选择满足条件的进行筛选选择

:first > $('li:first') > 获取第一个li元素
:last  > $('li:last')  > 获取最后一个li元素
:eq(index) >$('li:eq(2)') 获取到的li元素中索引号为第2个的元素

6.能够操作 jQuery 样式

.1css方法 用于样式少时操作

$('div').css('属性', '值')  
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

// 排他思想>想要多选一的效果，当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

.2类样式操作 只对指定类进行操作，不影响原先的类名

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

7.能够写出常用的 jQuery 动画

- 显示隐藏：show() / hide() / toggle() ;
- 划入画出：slideDown() / slideUp() / slideToggle() ; 
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 
- 自定义动画：animate() ;

8.能够操作 jQuery 属性

.1 基本属性操作

1. element.prop("属性名") 获取元素固有的属性值
$("img").attr("src");    　　　　　　 //返回文档中所有图像的src属性值

.2 CSS类

$("p").addClass("selected");    　　//为p元素加上 'selected' 类

.3 HTML代码/文本/值

$("input").val();    　　　　　　　　 //获取文本框中的值

9.能够操作 jQuery 元素

//1.操作jQuery元素 样式
$("p").css("color","red");    //设置p元素的color属性为red

10.能够操作 jQuery 元素尺寸、位置

//2.操作jQuery元素 位置
$(window).scrollTop()    //获取滚轮滑的高度
//3.操作jQuery元素 尺寸
$("p").height();    //获取p元素的高度