JQuery学习：第一篇

2018-06-13 本文已影响8人 __y

1.JQuery简介

JQuery是由美国人John Resig创建的一个js库，普通Dom能做的JQuery也能做。JQuery具有轻量，简单易学易用，兼容性好的特点

2.jquery的书写流程

步骤

1.引入jquery文件；
2.新建一对script标签书写代码分离；
3.按照jquery用谁就选谁的原则绑定事件书写所有代码；

其他

过滤指定的元素；
:eq() 表示过滤选中元素当中的第几个，按索引值过滤；
hide() 表示隐藏选中元素；
show() 表示显示选中元素；
toggle() 表示切换选中元素；
注意：他们都有一个共同的参数可以传递一个毫秒值来控制动画的时间。
案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <!--引入jquery-->
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <!--用什么选什么-->
    <script type="text/javascript">
        $(function () {
            $('button:eq(0)').click(function () {
                $('img').hide(1000);
            })

            $('button:eq(1)').click(function () {
                $('img').show(1000);
            })

            $('button:eq(2)').click(function () {
                $('img').toggle(1000);
            })
        })
        
    </script>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div>
    <img src="img/20140314114448155.jpg" width="155" height="189">
</div>
</body>
</html>

image.png

3.JQuery控制CSS

核心函数
css(参数1，参数2) 表示修改选中元素的css；
参数1:表示要修改的属性名；
参数2：要修改的值；

单属性修改
一次修改一个属性，当css函数传递两个参数的时候表示单属性修改。
多属性修改
指的就是一次修改多个属性的办法；
基本结构是
.css({k:’v’,k:’v’}) 注释：值是数字的时候可以不加引号。
带有代码提示的书写方式；
.css({‘k’:’v’,’k’:’v’})

4.JQuery控制html

核心函数
.html(参数1) 表示修改选中元素的内部的文本
参数1：表示要修改的值；
单属性修改
如果html()这个函数传递参数表示修改。
即：html（‘aaaaaaaa’）
多属性修改
如果html()函数不填写参数就表示访问。
案例：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
div{ width:800px; height:auto; background:#ccc; border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('button:eq(0)').click(function(e) {
        $('div').html('<h1>老贺他是一个优秀的设计狮：</h1><p>它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个</p>')
    });
    $('button:eq(1)').click(function(e) {
        alert($('div').html())
    });

})
</script>
</head>

<body>

<button>修改</button>
<button>访问</button>
<div>
    老贺他是一个优秀的设计狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个狮：它做过很多事例如这个例如那个
</div>
</body>
</html>

4.JQuery动画

slideUp() 向上滑动隐藏；
slideDown() 向下滑动显示；
slideToggle() 滑动切换；
hide() 隐藏；
show() 显示；
toggle() 切换；
案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta content="text/html" charset = "utf-8">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button:eq(0)').click(function () {
                $('img').slideDown(1000);
            });
            $('button:eq(1)').click(function () {
                $('img').slideUp(1000);
            });
            $('button:eq(2)').click(function () {
                $('img').slideToggle(1000);
            });
        })
    </script>
</head>
<body>
<button>滑动显示</button>
<button>滑动隐藏</button>
<button>滑动切换</button>
<br>
<img src="img/20140314114448155.jpg" width="155" height="189"/>
</body>
</html>

image.png

5.控制标签属性

核心函数
attr(参数1，参数2) 函数的作用可以修改任何标签的任何属性；
参数1：表示属性名称；
参数2：表示属性值；
如果说只填写一个参数表示单属性访问。

6.选择器

定义：选择器就是用来选择文档当中的标签的。它很好的解决了程序中的访问这个问题。
Jquery当中的选择器一共分为了3种类型；
1.基础选择器；
2.过滤选择器；
3.筛选选择器；
选择函数--$(); 选择函数中只写基础选择器和过滤选择器，筛选选择器是永远写在外面的以函数的形式。

基础选择器

第一原则：原来css怎么选jquery就怎么选。

'>': 表示选中其后的第一级子代；注释:他和空格不同，空格是选择所有后代。
'+': 表示选中当前元素同级其后紧挨着的唯一一个元素；
'~':表示选中其后所有。也是同级。
案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta content="text/html" charset="UTF-8">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button:eq(0)').click(function(){
                $('p').css('background','red');
            });
            $('button:eq(1)').click(function () {
                $('.left').css('background','red')
            });
            $('button:eq(2)').click(function () {
                $('#box').css('background','red')
            });
            $('button:eq(3)').click(function () {
                $('*').css('background','red')
            });
            $('button:eq(4)').click(function(){
                $('h1,h2,h3').css('background','red')
            });
            $('button:eq(5)').click(function () {
                $('ul li').css('background','red')
            });
            $('button:eq(6)').click(function () {
                $('body>*').css('border','1px solid #000')
            });
            $('button:eq(7)').click(function(){
                $('p+div').css('border','1px solid #000')
            });
            $('button:eq(8)').click(function(){
                $('p~div').css('border','1px solid #000')
            });
        })
    </script>
</head>
<body>
<button>选择所有段落标签</button>
<button>选择class为left的标签</button>
<button>选择id为box的标签</button>
<button>选择所有不分类型标签</button>
<button>选择所有标题标签</button>
<button>选择ul里面的li标签</button>
<button>选择body下的第一级所有标签并添加边框</button>
<button>选择p后的一个div</button>
<button>选择p后的所有div</button>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<div class="left">类选择器</div>
<div class="left">类选择器</div>
<div id="box">id选择器</div>
<h1>标题1标签</h1>
<h2>标题2标签</h2>
<h3>标题3标签</h3>
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

</body>
</html>

过滤选择器

我们可以认为所有的过滤器都是以：开头（除个别外）
所有的过滤器都是必须要写在选择函数里面的
下面是常用的过滤器的API
:first 过滤第一个；
:last 过滤最后一个；
:not() ***在指定的元素内排除某些元素；
:even 过滤索引值为偶数个；
:odd 过滤索引值奇数个；
:gt() 过滤索引值大于某个值的；
:lt() 过滤索引值小于某个值的；
:eq() 过滤索引值等于某个值的；
案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta charset = "UTF-8">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button:eq(0)').click(function () {
                $('li:first').css('background','red')
            });
            $('button:eq(1)').click(function() {
                $('li:last').css('background','red')
            });
            $('button:eq(2)').click(function() {
                $('li:not(:last)').css('background','red')
            });
            $('button:eq(3)').click(function() {
                $('li:not(:eq(1))').css('background','red')
            });
            $('button:eq(4)').click(function() {
                $('li:even').css('background','red')
            });
            $('button:eq(5)').click(function() {
                $('li:odd').css('background','red')
            });
            $('button:eq(6)').click(function() {
                $('li:gt(4)').css('background','red')
            });
            $('button:eq(7)').click(function() {
                $('li:lt(4)').css('background','red')
            });

            $('button:eq(8)').click(function() {
                $('li:eq(4)').css('background','red')
            });
            $('button:eq(9)').click(function () {
                $('li').css('background','#fff');
            });
        });
    </script>
</head>
<body>
<button>选择第一个li</button>
<button>选择最后一个li</button>
<button>选择所有li排除最后一个</button>
<button>选择所有li排除第二个</button>
<button>选择所有索引值为偶数个li</button>
<button>选择所有索引值为奇数个li</button>
<button>选择大于第5个的li</button>
<button>选择小于第5个的li</button>
<button>选择等于第5个的li</button>
<button>恢复</button>
<ul>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
    <li>这是一个li</li>
</ul>
</body>
</html>

筛选选择器

实际上筛选选择器当中主要学的是一种关系。
筛选选择器中的三巨头

父-parent()
子-children()
兄-siblings()
语法：这种选择器不能写在选择函数内部，它的用法遵循函数的用法。他的很大一个价值是经常和$(this)配合使用
案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta content="text/html" charset = "UTF-8">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" >
        $(function () {
            $('button').click(function () {
                $(this).siblings().css('background','#ccc');
                $(this).css('background','red');
            });
        })
    </script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>

案例：下拉框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta content="text/html" charset = "UTF-8">
    <style type="text/css">
        *{ padding:0; margin:0; list-style:none;}
        .all{ width:330px; height:30px; margin:100px auto; background:url(img/bg.jpg); padding-left:10px;}
        .all li{ width:100px; height:30px; background:url(img/libg.jpg); line-height:30px; text-align:center; float:left; margin-right:10px; _display:inline; position:relative; cursor:pointer;}
        .all ul{ position:absolute; left:0; top:30px; display:none;}

    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.all > li').hover(function () {
                <!--绑定事件-->
                <!--jquery 中 动画排队机制，触发了多少次就会一直在队列中-->
                $(this).children().stop().slideToggle();
            })
        })
    </script>
</head>
<body>
<ul class="all">
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>

</body>
</html>

补充知识点:

动画排队机制
Jquery里面所有的动画遵循一个叫做排队机制的原理，也就是说没有执行完的动画会一直等待执行。
如何清空排队，在执行的动画之前添加一个命令 .stop()即可清空所有排队。
hover事件
它表示鼠标移上和鼠标离开的综合体。
基本结构：hover(指令1，指令2)
注意：如果只填写一个指令表示鼠标移上和鼠标离开执行相同的指令。
链式编程
这是jquery里面独有的编程方式，
定义：针对同一个目标的所有修改可以在后面连续书写。