zhuhuiwen Front-end Dev Engineer

jQuery第一天入口函数和选择器

2016-10-24
jQuery

10/24/2016 8:40:13 AM

总结要求

  • 学会使用jquery(基本使用)
  • 使用jquery设计常见的效果

为什么使用jq

  1. 什么是jq
  2. js query
  3. 其实就是一个js库，实现了平时开发中常用的功能
  4. 方便我们调用，提高效率
  5. js库，他把一些功能封装到一个文件中，将来在用的时候直接拿过来使用即可。
  6. 已经实现过的库：animate commom.js
  7. 其实jq就是跟animate.js一样，都是一个库，只不过自己实现的库没jq大而已。

jq的基本使用

  1. 引入jq文件
  2. 入口函数
  3. 实现我们功能的代码

学习jq主要学习什么内容

  • 什么是jq
    • jQuery其实就是一个javascript的(类)库, 实现了平时开发过程中常用的功能（方法）
    • 方便了我们来调用，提高了我们的开发效率！
  • 学习jQuery主要学习什么内容
    • 就是学习jQuery这个库中提供的一系列的方法（ API ）
  • jQuery中几乎所有的操作都是方法，一定要带小括号来调用方法！
  • jQuery中的三个版本说明
    1. v1 兼容性非常好，能够兼容IT6-8，其他浏览器全部都支持
    2. v2 3兼容ie9以上

    正常，min，slim区别

    1. v3种slim版本去掉了不常用的功能移除了，这样让文件变得更小，更利于在移动端使用
      • 如果载想使用这些功能，去jq官网找到这些功能即可。
    2. 相同版本的两个文件的区别，带min和没min，带min的表示是压缩过的
      • 压缩的目的，让js/css/html文件变得更小，这样就能够在更短的时间内加载出来
      • 压缩就是把js文件中空格、换行符、变量名等，移除或者替换为更短的字符
    3. 选择
      1. 同版本的文件
        1. 开发过程中使用哪个都可以，但是在项目上线的时候，一定要使用压缩版

jq的使用注意点

  1. 在使用之前，一定是，先引用jq文件然后再使用
  2. 常见的错误
    1. $ is not defiend
      1. 错误原因：jq文件没有引入，就是用jq文件没有引用
      2. 也不要，先使用jq代码，再引用文件
    2. err file not found
      1. 错误原因 ：路径写错了

jq入口函数的使用

  1. 定义入口函数的两种形式
    1. $(document).ready(function() {});
    • 相当于window.onload = function(){}
    • 就是看文档有没有准备好
    • document：文档
    • ready：准备好了吗？
  2. $(function() {})

  3. 以上两种实现jQuery入口函数的形式，作用是相同的

  4. 作用： 作用：等到页面文档加载完成了，在执行事件处理程序中的代码！

jq入口函数与window.onload区别

  1. 入口函数的执行时机不同
    1. window.onload: 是要等到页面文档以及页面中所有的外部资源，（引入的js文件、css、img）全部加载完成之后，才会执行事件中的代码！
    2. jQuery的入口函数：是等到页面文档树加载完成就会执行事件中的代码！
    3. jQuery的入口函数要比 window.onload 执行的时机要早
  2. 书写的个数不同
    1. window.onload 只能绑定一次事件，如果绑定多次，后面的事件会覆盖前面的事件
    2. jQuery的入口函数可以有多个

jq中的$

  1. jquery中的$说明
    1. 其实，jQuery中的$符号就是一个函数，没有什么特别的地方！
    2. 同一个$函数，根据传入的参数不同，实现不同的调用效果！
    3. jQuery中不仅提供了 $ 符号来引用整个jQuery库，还提供了另外一个： jQuery，也能够引用整个jQuery库。（也就是能够使用jQuery中的代码）
    4. 使用jQuery这个函数，就跟使用$符号，完全相同！
    5. 注意： jQuery 是这个函数的名字，所以是区分大小写的！
  2. js变量的命名规范
    1. 字母数字下划线$
    2. 不能以数字开头

jQuery对象和Dom对象的区别

  1. DOM对象就相当于 衣服
  2. jQuery对象就相当于 洗衣机
  3. 什么是DOM对象？
    1. 通过DOM提供的API（方法），获取到的元素对象，就是DOM对象
    2. 获取DOM对象的方法
      • getElementById(“id”) 获取到的元素就是一个DOM对象
      • getEelmentsByTagName(“div”) 这个方法的返回值是一个伪数组
      • 伪数组中的每一个元素才是DOM对象
        • getEelmentsByTagName(“div”)[0] 这才是DOM对象
    3. DOM对象的特点：具有innerText/innerHTML/style/value/className/getAttribute()这些属性和方法
  4. 什么是jQuery对象？
    1. 通过jQuery获取元素的方法，获取到的对象就是jQuery对象
    2. 获取jQuery对象的方法：
      1. $(“#dv”) / $(“div”) 通过这种方法获取到的对象，就是jQuery对象
    3. jQuery对象的特点： show() / text()
  5. 注意：
    • DOM对象中没有jQuery对象中的属性和方法，所以不能调用
    • jQuery对象中也没有DOM对象中的属性和方法，所以也不能使用！

jQuery对象转化为DOM对象

  1. jq对象转换为dom对象
    1. 说白了就是从jQuery对象中取出DOM对象
    2. jQuery对象中就是一个一个的DOM对象，所谓的转化：
      • 其实就是 将 DOM对象从 jQuery对象中取出来
      • 类比：从洗衣机中取衣服！
  2. 例子

    • jq转换成dom

         var $dv = $("div");
 		var dv1 = $dv[0];
 		var dv2 = $dv[1];
 		var dv3 = $dv[2];

    • DOM对象转化为jQuery对象 -只需要将DOM对象当作参数传给 $函数即可！

        var dv = document.getElementsByTagName("div")[0];
 		var $dv1 = $(dv);

10/24/2016 2:30:09 PM

jQuery 选择器

  • 概念
    • 就是jQuery中提供的用来获取页面中的DOM元素的一些字符串
    • 一般配合 $( 选择器 ) 这样调用，就能获取到页面中的元素了！

      jq基本选择器

  1. 基本选择器
    1. id选择器
      1. 作用：匹配到页面中id为指定值的DOM元素，获取之后，是一个jQuery对象（$(“#cc”)）
  2. jQuery中设置样式的方法：
    1. $(“#cc”).css(“background”,”red”)
    2. 第一参数：要设置的样式属性的名称
    3. 第二个参数：要设置的样式属性的值
    4. 只有jQuery对象才能使用这个方法
  3. 标签选择器
    1. $(“li”)
    2. 作用：匹配页面中指定标签名的元素
  4. 类选择器
    1. $(“.cc”)
    2. 作用：匹配页面中指定类名的元素（只要具有这个类就能够获取到）
  5. 通配符选择器
    1. $(“*”)
    2. 作用：获取页面中所有的元素
    3. 尽量少用，获取配合其他的选择器来使用
  6. 并集选择器
    1. 符号,
    2. $(“li,p”)
    3. 作用：将 以,分割的多个选择器匹配的元素 一起返回
    4. 比如:”li,p”,获取li和p
  7. 交集选择器
    1. $(“p.hot”)
    2. 作用： 选择p标签并且class为hot的元素，进行设置样式

层级选择器

  1. 子代选择器(直接关系)
    2. $(“#cc>li”)
    3. 作用：获取父元素中的子元素
      1. children()
  2. 后代选择器
    1. $(“#cc li”)
    2. 空格
    3. 作用：获取父元素中的所有后代元素（也包含了子元素）
      1. find（”li”）注意： 参数是必须传入的

过滤选择器

  1. :odd 奇数行选择器，配合其他的选择器来使用
    1. 作用：获取索引号为奇数行的所有元素
  2. :even 偶数行选择器
    1. 作用：获取索引号为偶数行的所有元素
  3. :eq(index) ==> equals 相等
    1. index：表示索引号
    2. 作用：选择指定索引号的元素
      1. 对应的方法：jq对象.eq(index)
  4. ：gt(index)
    1. 作用：大于index的
  5. 使用过滤器实现隔行变色 ——– /使用过滤选择器/ $(“li:odd”).css(“background”,”red”); $(“li:even”).css(“background”,”green”);

属性选择器

  1. 选择具有id属性的所有元素
    1. $("li[id]").css("color", "red");

案例

下拉菜单案例

	$(".wrap>ul>li").mouseenter(function(){
	// 问题：怎么获取到当前元素（一级菜单）
    // this ===> 是一个DOM对象
    // $(this) 这就是将DOM对象this转化为jQuery对象this
    // 给哪个DOM对象绑定的事件，事件中的this就是谁！
    // 
    // $("div").children()
    // children() 方法的作用：用来获取某个jQuery对象的子元素
    // 这个方法可以传入一个参数： 选择器！一般情况下就是基本选择器！
    // $(this).children("ul") 这句话的意思就是：
    //      获取当前元素中的子元素 ul
		$(this).children('ul').show();
	});

突出显示案例

// 如何获取到当前元素的所有兄弟元素： 
//  $(this).siblings("li") 这个方法的参数是可以省略的
//  作用：用来获取当前元素的所有兄弟元素

	$(this).css("opacity",1).siblings('li').css("opacity",.3);
});

$(".wrap").mouseleave(function(){
					//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
					$(this).find('li').css("opacity",1);
				})

淘宝精品服饰案例

<script src="../jquery-1.12.4.js"></script>
<script>
    // 第二步：入口函数
    $(document).ready(function() {
        // 思路：
        // 1 获取到左侧所有的li元素，并绑定鼠标移上来的事件
        // 2 获取到当前元素的索引号，将索引号与中间内容区域的元素的索引号
        //      对应，然后，将对应的这个元素展示出来，兄弟元素隐藏掉

        // 1 获取到左侧所有的li元素，并绑定鼠标移上来的事件
        $("#left").children("li").mouseenter(function() {
            // 2 获取到当前元素的索引号，将索引号与中间内容区域的元素的索引号
            //      对应，然后，将对应的这个元素展示出来，兄弟元素隐藏掉

            // index() 作用：就是来获取当前元素的索引号！
            // $(this).index();
            // 索引号是相对于谁来计算的？ 相当于当前元素的兄弟元素来计算的
            // 其实就是当前元素在兄弟元素中的位置（从0计算）
            var index = $(this).index();
            // console.log(index);

            // 2.1 获取到中间内容区域的所有元素
            // $("#center").children('li')
            // "#center > li:eq(index)" 作用：用来获取#center中的所有li元素并且
            // 这个li的索引号是：index 才能被获取到！
            // $("#center > li:eq(" + index + ")").show().siblings().hide();

            // jQuery中也提供了一个叫做.eq() 方法
            // 这个方法的作用跟 ":eq(index)" 选择器是相同
            $("#center").children('li').eq(index).show().siblings().hide();
        });

        // 3 实现给右边的导航绑定事件
        $("#right > li").mouseenter(function() {
            // 获取到当前元素的索引号
            var index = $(this).index() + 9;

            $("#center > li:eq(" + index +")").show().siblings("li").hide();
        });
    });
</script>

mouseover mouseenter 却别

  1. 这两个鼠标的移入事件
    1. mouseover 会触发冒泡，子元素触发的事件，会冒泡到父元素，将父元素的onmouseover事件触发
    2. mouseenter不会触发冒泡机制

index

  • index()的作用：就是来获取当前元素的索引号
  • 索引号是相对于谁来计算的？相当于当前元素的兄弟元素
  • 其实就是当前元素在兄弟元素中的位置

方法

  1. css(属性名，属性值)
  2. index()用来获取指定元素的索引号
  3. siblings()用来获取指定元素的兄弟元素
    1. 一般就是获取某一个元素的兄弟元素

10/24/2016 5:48:51 PM

10/24/2016 9:50:26 PM 进行整理完成

上一篇 js基础第三天function和object

下一篇 jQuery第二天css样式选择器及常用方法和动画

Comments

Content