jQuery入门

简介

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery是一个快轻量丰富的JavaScript库，主要封装了四块内容，分别是：html遍历操作，事件，动画和Ajax. 并且使用简单，丰富和易于扩展。

官网：www.jQuery.com

www.bootcdn.cn 下载jQuery

jQuery的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">weather</div>
<script src="jQuery/js/jquery.js">
</script>
<script>
    console.log($('.box'))    写选择器,返回的结果是一个jQuery对象也就是一个伪数组，可以通过索引直接转换成js节点对象。
</script>
</body>
</html>



js对象转jquery对象

var oBox = document.getElementById('box');
console.log($(oBox));

jQuery选择器

1.基本选择器

ID选择器（#）作用：选择id为指定的第一个元素

类选择器（.）作用：选择具有class所有类名的元素

标签选择器（element）作用：选择标签名为指定值的所有元素

通配符选择器（*）作用：选择器所有元素

2.高级选择器

后代选择器（空格表示）选择所有的后代元素

子代选择器（>）选择所有的子代元素

3.属性选择器

例如：input[type=text]

4.基本过滤选择器

:eq(index) index是从0开始的一个数字

:gt(index) 选择序号大于index的元素

:lt(index) 选择器小于index的元素

:odd 选择所有序号为奇数的元素

:even 选择所有序号为偶数的元素

:first 选择匹配的第一个元素

:last 选择匹配的最后一个元素

eq的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
<p>weather</p>
<ul>
    <li>
        <p>sunny</p>
    </li>
    <li>
        rainny
    </li>
</ul>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
$('.box ul li:eq(1)').css({'color':'red','fontSize':20})
</script>
</body>
</html>

筛选方法

find(selector) 查找指定元素的所有后代元素（包括子子孙孙）用法：$('#box').find('p')

children 查找指定元素的子元素（亲儿子）

siblings() 查找所有兄弟元素（不包括自己）

parent() 查找父元素

eq(index) 查找指定元素的第index元素，index是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
<p>weather</p>
<ul>
    <li>
        <p>sunny</p>
    </li>
    <li>
        rainny
    </li>
</ul>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
// $('.box ul li:eq(1)').css({'color':'red','fontSize':20})   通过jquery封装的css设置样式
    console.log($('.box').find('p,ul'));        查询后代
    console.log($('.box').children('p'));       查询子代
    console.log($('.box').parent());            查询父元素
    console.log($('.box ul li').eq(1));         eq按照索引查询
    console.log($('.box').siblings())           查询兄弟元素，除了自己以外
</script>
</body>
</html>

选项卡js vs jQuery

js基于排他思想实现选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>热门</button>
<button>电视影音</button>
<button>电脑</button>
<button>家具</button>

<script src="jQuery/js/jquery.js"></script>
<script>
    var btns = document.querySelectorAll('button');
    for (var i = 0; i < btns.length;i++){
        btns[i].onclick = function () {
            for (var j=0;j<btns.length;j++){
            btns[j].style.color = 'black';
        }
            this.style.color = 'red';
        }
    }

</script>
</body>
</html>

基于jQuery链式编程实现选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>热门</button>
<button>电视影音</button>
<button>电脑</button>
<button>家具</button>

<script src="jQuery/js/jquery.js"></script>
<script>
 
    $('button').click(function () {
        $(this).css('color','red').siblings().css('color','black')
    })

</script>
</body>
</html>

动画

1.普通动画

show() 无参数表示让指定的元素直接显示出来

hide()

show和hide的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop.show(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop.hide(2000);
        }
    )
</script>
</body>
</html>
ps:先停止动画 在开启动画



例子：toggle相当于show和hide操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    
    $('button').click(function () {
        $('.box').stop().toggle(2000)
    })
</script>
</body>
</html>

ps:toggle里面可以加参数，表示动画执行之后执行其他的。

2.卷帘门效果

slideDown() 下拉

slideUp() 上卷

slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop().slideDown(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop().slideUp(2000);
        }
    )

</script>
</body>
</html>

3.淡入淡出

fadeIn（）让元素淡淡的进入视线

fadeOut() 让元素渐渐淡出视线

fadeToggle() 改变透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop().fadeIn(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop().fadeOut(2000);
        }
    )
   
</script>
</body>
</html>

常见事件

click 鼠标单击事件

dblclick 双击事件

mousedown()/up() 鼠标按下弹起事件

mousemove() 鼠标移动事件

mouseover()/out() 鼠标移入移除事件

mouseenter()/leave()鼠标进入离开事件

focus()/blur() 鼠标聚焦失焦事件

keydown()/up 键盘按键按下/弹起触发

表单事件

change() 表单元素发生改变触发事件

select() 文本元素发生时触发事件

submit()

jQuery对值的操作

html() innerHTML实现，对文本和标签进行渲染

text() innerText实现，只对文本进行渲染

val() value的实现，只对标签中有的value属性有效，比如input等

html设置值和获取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    var name = '百度一下';
    $('button').mouseenter(
        function () {
           $('.box').stop().fadeIn(1000,function (){
               $(this).html(`<a href="#">${name}</a>`)
           })
            console.log($(this).html());
        });
    $('button').mouseleave(
        function () {
           $('.box').stop().fadeOut(2000);
        }
    )
 
</script>
</body>
</html>

html标签属性操作

attr(key,value) 设置单个属性值

attr({key1:value,key2:value2}) 对标签设置多个属性值

attr(key) 获取属性值

removeAttr() 删除某个属性

ps: 改操作只对标签中的属性操作

属性 增删查操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    console.log($('.box').attr('class'));
    $('.box').attr({id:'box',title:'boxx'});
    setTimeout(function () {
        $('.box').removeAttr('title')
    },4000);


</script>
</body>
</html>

对类操作

addClass

removeClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('.box').mouseenter(function () {
      $(this).addClass('active')
    })

     $('.box').mouseleave(function () {
      $(this).removeClass('active')
    })
</script>
</body>
</html>

DOM操作

父.append(子)

子.appendTo(父) 插入操作，插入到子元素的最后一个父子之间

prepend

prependTo 插入操作，插入到父元素中的第一个元素

兄弟.after(要插入的兄弟)

要插入的兄弟.insertAfter(兄弟)

before

insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <div class="item">weather</div>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
    <!--append and appendTo-->
    $('#box').append('<p>hello</p>')
    $('#box').append('<p>hello2</p>')
    $('<a href="#">百度</a>').appendTo('#box')

    
    $('.item').after('<p>123</p>');
    $('.item').before('<p>345</p>');


</script>
</body>
</html>

$(select).replaceWith(content); 替换

replaceAll 替换所有

remove() 删除节点后，事件也会删除

detach() 删除节点后，事件会保留

empty() 清空选中的所有子元素

替换和清空的实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <div class="item">weather</div>
</div>

<script src="jQuery/js/jquery.js"></script>
<script>
    <!--append and appendTo-->
 

    $('.item').replaceWith('<span>dsb</span>')
    $('#box').empty()
</script>
</body>
</html>

ajax调用接口数据

接口来自和风天气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $.ajax(
        {url:'https://free-api.heweather.net/s6/weather/now?location=beijing&key=yourkey',
        method:'get',
        success:function(res){
        console.log(res.HeWeather6[0].now.cond_txt);
        var weather = res.HeWeather6[0].now.cond_txt;
        $('div').html(`今天今天状况: ${weather}`)
    },
         error:function (err) {
             console.log(err)
         }
        }
    )

</script>
</body>
</html>

posted @ 2019-07-11 17:08 ivy_wang 阅读(410) 评论(1) 编辑收藏举报

刷新页面返回顶部

ivy_wang

jQuery入门

简介

What is jQuery?

jQuery的基本使用

公告