jQuery入门

宁静致远 2019-07-12 01:4620 阅读

 

简介

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>

 

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!