1. 技术文章
  2. jQuery入门

jQuery入门

由 梦想的初衷 提交于 2020-02-05 00:22:59

 

简介

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>

 

标签
jquery选择器
jquery事件
css选择器
meta
jquery
按钮
meta标签
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!