当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery入门

jQuery入门

2019年07月12日  | 移动技术网IT编程  | 我要评论

 

简介

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网