jQuery第一天(入口函数、jq对象与dom对象、选择器)

jQuery第一天

1.为什么要学jQuery

jq主要是来实现页面用户交互操作的

1.获取元素的方式很简单
2.不用考虑兼容性问题
3.jQuary提供了很多动画相关的函数，动画制作方便
4.代码比原生js简单了很多

2.jQuery初体验

  <script>
        $('#btn1').click(function () {
            // jq的隐藏特性 隐式迭代：不需要手动写for循环了，会自动进行遍历
            $('div').css('display', 'block');
        })

        $("#btn2").click(function () {
            $('div').text('哈哈哈哈');
        });
    </script>

3.*入口函数*

写法：

//写法1
$(document).ready(function() {
	
});
//写法2  推荐
$(function() {
	
});

好处：

1.等元素解析完毕再执行jq,保证能获取到元素
2.自己在一个区域内，防止全局变量污染

与js的window.onload的区别：

1.如果window.onload绑定多次，会造成覆盖。而jq的入口不会覆盖，可以同时添加多个。

2.jq的入口函数先触发，在解析完页面结构时就会触发。	window.onload在页面元素全部加载完毕之后才会触发。

4.jQuery使用步骤

1.引入js文件

<script src="jquery-1.11.1.js"></script>
如果不考虑兼容性，随意引入哪个版本都行

2.写入口函数

$(function(){    });

3.在函数内部实现需求功能

1.获取元素、2.事件绑定、3.分析业务、4.找到api实现

$(function () {
            $('.groupTitle').click(function () {
                $(this).next().slideToggle();
            })
        })

5.*jQuery对象与DOM对象*

dom对象：

通过原生js方法获取元素返回的对象就是dom对象
dom对象 转 jq对象：
 		$( dom对象 )

jq对象：

通过$() 获取元素返回的对象就是jq对象
jq对象 转 dom对象
		通过下标取出对应下标的dom对象
		[index] 或 get(index)

注意：

1. DOM对象与jQuery对象的方法不能混用。
2. DOM对象可以和jQuery对象相互转化

6.$符号的详解

$是jq提供的函数

参数为	作用	语法表示
函数	入口函数	$(function(){})
选择器	获取元素	如$(“div”)
dom对象	将dom对象转成jq对象	$(dom对象)

7.*选择器*

---

什么是jQuery选择器？

1.jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
2.jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。
3.jQuery选择器返回的是jQuery对象。

css选择器

jQuery完全兼容css选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素
:first	$(“li:first”).css(“color”, ”red”);	获取到的li元素中的第一个
:last	$(“li:last”).css(“color”, ”red”);	获取到的li元素中的最后一个

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	获取当前元素的所有子元素中的li元素
find(selector)	$(“ul”).find(“li”);	获取当前元素中的后代元素中的li元素
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

8.一些方法

1.index()  获取当前元素在所有兄弟中的索引
2.show() 展示  hide() 隐藏
3.css()  操作样式
	(1)css(属性名称，属性值)
	(2)css({属性名称：属性值，属性名称：属性值})
	
注意：方法是js的二次封装，是函数，调用必须加括号

9.*几个案例*

【案例：下拉菜单】

<script>
        // 函数入口 
        $(function () {
            //1.用$(dom对象)得到jq对象
            //2.添加鼠标移入事件
            $('a').mouseenter(function () {
                //3. 隐式迭代：不需要手动写for循环了，会自动进行遍历。
                //当前a的兄弟元素都向下滑动打开
                $(this).siblings('ul').slideDown();
            })

            $('a').mouseleave(function () {
                //当前a的兄弟元素都向上滑动收起
                $(this).siblings().slideUp();
            })
        })
    </script>

【案例：突出展示】

<script>
        $(function () {
            $('li').mouseenter(function () {
                //排他思想：当前li的透明度都变亮，他的兄弟元素变暗
                $(this).css('opacity', '1');
                $(this).siblings().css('opacity', '0.3');

            })
            /* 
            // 如果用li移出，鼠标移到li外面的空隙会有变化。
            $('li').mouseleave(function () {
                $('this').css('opacity', '1');
            }) 
            */
            //用li的父元素获取当前li控制鼠标移出则不会有bug
            $('.wrap').mouseleave(function () {
                // console.log($(this));
                $(this).find('li').css('opacity', 1);
            })
        })
    </script>

【案例：手风琴】

<script>
        // 1.获取所有的标题
        // 2.为标题绑定click事件
        // 3.在事件中找到当前标题的下一个div元素,让其展开,同时让其它的任何的被展开的div合并
        $(function () {
            $('.groupTitle').click(function () {
                // $(this).next().slideDown()
                // slideToggle:实现展开和合并的切换,如果是展开的,就合并,如果是合并的就展开
                $(this).next().slideToggle()
                $(this).parent().siblings().find('div').slideUp()
            })
        })
    </script>

【案例：淘宝精品】

<script>
        // 我们发现：导航项的索引应该对应着图片的索引(右侧应该进行单独的处理)
        // 处理这个效果的关键问题在于能够到当前li的索引，从而让对应索引位置的图片显示，让其它的图片隐藏
        // index()只能获取当前元素在所有兄弟元素中的索引，它是jq的方法
        $(function () {
            // 获取所有图片
            let $imgs = $('#center li')
            // console.log($('#left>li,#right>li'))
            // $('#left>li,#right>li').mouseenter(function () {
            // 这种方式获取索引值有问题
            //     console.log($(this).index())
            // })
            $('#left>li').mouseenter(function () {
                let index = $(this).index()
                // fadeIn():渐渐显示
                // fadeOut():渐渐消失
                $imgs.eq(index).siblings().fadeOut()
                $imgs.eq(index).fadeIn()
            })

            $('#right>li').mouseenter(function () {
                let index = $(this).index() + $('#left>li').length
                // fadeIn():渐渐显示
                // fadeOut():渐渐消失
                $imgs.eq(index).siblings().fadeOut()
                $imgs.eq(index).fadeIn()
            })
        })
    </script>

10.区分jQuery与Javascript

–JavaScript是一门编程语言，jQuery仅仅是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。

–JavaScript库：把JavaScript里面经常用的功能代码封装成一个文件，使用的时候直接引进来即可。

–JavaScript是一门编程语言，用来编写客户端浏览器脚本。

11.jq对象是个伪数组

伪数组：本质上不是一个数组，但是操作方式看起来像数组，但是注意它没有数组的方法

<body>
    <ul>
        <li>今天是jq第1天</li>
        <li>今天是jq第2天</li>
        <li>今天是jq第3天</li>
    </ul>
    <script>
        // 伪数组：本质上不是一个数组，但是操作方式看起来像数组，但是注意它没有数组的方法
        let obj = {
            0: "a",
            1: "b",
            2: "c",
            length: 3
        }

        // 对象有两种取值方式：对象.属性  +  对象[属性]

        for (let i = 0; i < obj.length; i++) {
            console.log(obj[i])
        }
        [].push.call(obj, 'd')
        console.log(obj)

        console.log(document.querySelectorAll('li'))
        console.dir($('li'))
        console.dir($('li').__proto__.constructor) //  jQuery >> init()
        console.log($('li')[0].__proto__.constructor) // htmlElement
    </script>
</body>