jQuery入门

程序员文章站 2022-04-12 09:38:09

简介 What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event ......

简介

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>

上一篇：关于ES6的对象扩展运算符

下一篇：【vue】vue生命周期---精简易懂-----【XUEBIG】

jQuery入门

简介

what is jquery?

jquery的基本使用

html开发工具有哪些（html零基础入门教程）

jQuery中replaceWith()方法用法实例教程

jQuery中:eq()选择器用法实例教程

带你入门Linux中size命令的6个例子

jQuery中get()方法用法实例教程

jQuery中queue()方法用法实例教程

jQuery中element选择器用法实例教程

jQuery中size()方法用法实例教程

jQuery对象的selector属性用法实例教程

jQuery中:not选择器用法实例教程