js基础2-jQuery介绍

最新推荐文章于 2022-12-19 22:31:46 发布

一杆老狙

最新推荐文章于 2022-12-19 22:31:46 发布

阅读量195

点赞数 4

分类专栏： jquery库的应用文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/AKindofo/article/details/124131985

版权

jquery库的应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery

1.jquery是一个快速，小巧且功能丰富的JS库，也就是JS封装的JS文件
2.操作html文档节点
3.操作dom节点更方便
4.兼容性
5.下载：

官网下载链接: link
方法大全链接: link

6.语法$(selector).action()

注：

selector：要操作元素，action：操作方法
jquery选择器选中元素，返回的是jquery对象，与dom节点不一样，jquery对象是伪数组

属性选择器

属性	含义
$(‘selector[attr]’)	选择包含给定属性的元素
$(‘selector[attr =“value”]’	选择给定属性是某个特定值的元素
$(‘selector[attr !=“value”]’	选择属性不等于特定值的元素
$(‘selector[attr *=“value”]’	选择是包含某些值的元素
$(‘selector[attr ^=“value”]’	选择是以某些值开始的元素
$(‘selector[attr $=“value”]’	选择是以某些值结尾的元素
$(‘selector[selector1][selector2]’)	复合属性选择器，需要同时满足多个条件

引入方法：

<body>
    <input type="name" name="name">
    <input type="name" name="password">
</body>
<script src="./jquery.js"></script>
<script>
   console.log($('input[name="name"]')); 
//<input type="name" name="name">
   console.log($('input[name]'))
// <input type="name" name="name"><input type="name" name="password">

表单属性伪类

属性	含义
:checked	选中的表单元素，一般用于radio和checked
option:selected	选中的option元素
:enabled	可用元素
:disabled	不可用元素
:read-only	只读元素
:focus	焦点元素

查找（筛选）方法

属性	含义
parent()	查找祖先元素
parents()	查找所有祖先元素
parentUntil()	查找祖先元素直到某个元素
children()	查找后代元素
find()	查找特定后代元素
prev()	向前查找兄弟元素
prevAll()	向前查找所有兄弟元素
prevUntil()	向前查找兄弟元素直到某个元素
next()	向后查找兄弟元素
nextAll()	向后查找所有兄弟元素
nextUntil	向后查找兄弟元素直到某个元素
siblings()	查找所有兄弟元素
eq()	选择集合中指定下标的元素
first()	选择集合中第一个元素
last()	选择集合中最后一个元素
index()	查找元素在父元素里面位置

<body>
    <ul>
        <li></li>
        <li></li>
        <li class="third"></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script src="./jquery.js"></script>
<script>
    console.log($('li').eq(2));
//第三个li元素
    console.log($('.third').index());
//返回索引号2
    console.log($('li').siblings());
//返回所有li元素
</script>

属性操作

1.给一个元素添加（获取）某个属性

添加$(‘div’).prop(‘id’,‘box’)
$(‘div’).prop(‘id’)

注： prop只能添加元素自己本身就有的属性
2.给一个元素添加（获取）某个自定义的属性

添加$(‘div’).attr(‘index’,‘1’)
$(‘div’).attr(‘index’)

3.移除某一个属性

$(‘div’).removeAttr(‘index’,‘1’)

样式操作

1.$().css()

示例：

<script>
    $('div').css('width','100px')
//设置行内样式
    console.log($('div').css('width'));
//拿到行内样式
    $('div').css({
        height:'100px',
        backgroundColor:'pink'
    })
/设置多个行内样式
</script>

2.$().addClass() 添加一个元素

3.$().removeClass() 移除一个元素

4.$().toggleClass() 有元素就移除，没有就添加

5.示例：

<body>
    <div></div>
</body>
<script src="./jquery.js"></script>
<script>
    console.log($('div').hasClass('box'));
//false
    $('div').addClass('box') 
//添加一个box
    console.log($('div').hasClass('box'));
//ture
    $('div').removeClass('box')
//移除box
    $('div').toggleClass('box')
//有box就移除，没有就添加
</script>

操作事件

1.绑定事件的方法

<body>
    <div>
        <button>点击</button>
    </div>
</body>
<script src="./jquery.js"></script>
<script>
//点击事件
    $('button').on('click',function(){
        console.log('点击了');
    })
//点击时传参
    $('button').on('click',{name:'jack'},function(e){
        console.log(e);
        console.log(e.data);
    })
//事件委托
    $('div').on('click','button',function(){
        console.log('button点击了');
    })
//事件委托传参
    $('div').on('click','button',{name:'jack'},function(e){
        console.log(e);
        console.log(e.data);
    })
</script>

2.解绑事件
jquery后面事件不会覆盖前面事件，解绑需要$().unbind()

$('button').unbind('click').click(function(){})
//解绑以前事件，并重新绑定一个点击事件

3.移除事件

<script>
    $('button').on('click',function(){
        console.log('button点击了');
    })
     $('button').on('mousemove',function(){
        console.log('button点击了');
    })
    $('button').off('click')
//移除点击事件
    $('button').off()
//移除所有事件
</script>

4.只执行一次事件

$('button').one('click',function(){})

5.直接触发事件

  $('button').on('click',function(){
        console.log('自动执行');
    })
    $('button').trigger('click')
//代码走到此处直接触发点击事件

6.直接绑定事件，不用on

事件	含义
click	点击
blur	失去焦点
focus	获取焦点
hover	移动
scroll	滚动

示例：

$('button').hover(function(){
        console.log('移入');
    },function(){
        console.log('移出');
    })

链式写法

jquery允许在相同元素运行多条jquery命令

 $('p').first().css('color','red').html('测试p')
 //第一个p内容为红色测试p

遍历

<body>
    <div>
        <P>1</P>
        <P>2</P>
    </div>
</body>
<script src="./jquery.js"></script>
<script>
    $('p').each((index,item)=>{
        console.log($(item),index);
    })
//p1标签  0
//p2标签  1
</script>

动态DOM节点

1.创建节点

$('<p>').text('内容')

2.添加节点

<body>
    <div></div>
</body>
<script src="./jquery.js"></script>
<script>
    let pEle=$('<p>').text('内容')
    $('div').append(pEle)
</script>

事件	含义
parent.append(child)	向父元素插入子元素，插入子元素为最后一个元素
child.appendTo(parent)	将子元素插入父元素，插入子元素为最后一个元素
parent.prepend(child)	向父元素插入子元素，插入子元素为第一个元素
child.prependTo(parent)	将子元素插入父元素，插入子元素为第一个元素
child.prependTo(parent)	将子元素插入父元素，插入子元素为第一个元素
brother.after(obj)	在某个兄弟节点之后插入对象
brother.before(obj)	在某个兄弟节点之前插入对象

3.删除节点

$().empty()
$().remove()
$().detach()

示例：

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
<script src="./jquery.js"></script>
<script>
    $('ul').empty()
//删除ul下所有li节点
    $('ul').remove()
    $('ul').detach()
//删除ul和li所有节点
</script>

4.替换节点

$(‘div’).replaceWith(’<p></p>’)
$(‘div’).replaceAll(’<p></p>’)
注意：两者区别在于replaceWith只能替换一个节点，replaceAll可以替换里面所有节点

5.复制节点

$().clone()

jquery与DOM节点转换

1.jquery准换为DOM

const DOM=$()[0]
const Dom=$().get[0]

2.DOM转换为jquery

const DOMEle=document.querySelector(’.d’)
const jquery=$(DOMEle)

元素尺寸

1.操作元素宽和高（不含padding和border）

语法	含义
$().width()	获取元素宽
$().width(n)	设置元素宽npx
$().height()	获取元素高
$().height(n)	设置元素高npx

2.获取元素内置宽和高（含padding不含border）

语法	含义
$().innerWidth()	获取元素宽
$().innerHeight()	获取元素高

3.获取元素外置宽和高（含padding和border）

语法	含义
$().outerWidth()	获取宽（含padding,border）
$().outerWidth(true)	获取宽（含padding,border,margin）
$().outerHeight()	获取高（含padding,border）
$().outerHeight(true)	获取高（含padding,border,margin）

获取元素位置

1.元素相对于页面位置

语法	含义
$().offset()	得到一个对象{top:值，left:值}
$().offset(top:m,left:n)	定位于页面左上角mpx npx

2.元素相对于父元素的偏移量

$().position()

注意： 得到一个对象包含X和Y的值，父元素需要定位，只读

3.获取页面卷去的高度和宽度

语法	含义
$(document).scrollTop()	获取页面被卷起的高度
$(document).scrollLeft()	获取滚动条到左边垂直宽度

$(document).scroll(function(){
        console.log($(document).scrollTop()); 
    })
//滚动时拿到滚动条距离页面顶部距离

4.通过CSS改变元素位置

$().css(‘left’:m,‘top’:n)

jquery效果动画Obj

1.隐藏显示

语法	含义
jqueryObj.hide()	隐藏
jqueryObj.show()	显示
jqueryObj.toggle()	切换隐藏于显示

$('div').css('display','none')
//添加行内样式也可以
  $('div').hide()
//隐藏div
  $('div').show()
//显示div

2.淡入与淡出

语法	含义
jqueryObj.fadeIn()	通过淡出方式显示
jqueryObj.fadOut()	通过淡入方式隐藏
jqueryObj.fadToggle()	切隐藏与显示

$('button').click(function(){
        $('div').fadeOut()
//立即淡入隐藏
        $('div').fadeOut(1000)
//1000ms慢慢隐藏
        $('div').fadeOut(1000,function(){
            console.log(1);
        })
//
    })

3.滑动

语法	含义
jqueryObj.slideDown()	用滑动动画显示
jqueryObj.slideUp()	用滑动动画隐藏
jqueryObj.slideToggle()	切换显示与隐藏

 $('button').click(function(){
      $('div').slideUp()
})
$('button').click(function(){
         $('div').slideUp(100,function(){
            console.log('完成');
        })
    })
//也可以传参，第一个代表规定时长，第二个表示完成后执行函数

4.动画animate()

$(selector).animate({params},speed,callback)
params：定义形成动画的CSS属性
speed：规定效果时长
callback：动画完成执行效果

$('button').click(function(){
        $('div').animate({
            width:100,
           height:100,
           opacity:0.5
        },1000,'linear',function(){
            console.log('完成');
        })
    })

注意： 都是加在行内样式上的

5.停止与结束动画

停止$(selector).stop()
结束$(selector).finish()

$('button').click(function(){
      $('div').stop().slideUp()
//停止当前动画重新执行
      $('div').finish().slideUp()
//结束当前动画重新执行
})

6.示例：做一个菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;margin: 0;
        }
        .wrap{
            width: 140px;
            background-color: black;
            margin: 50px;
        }
        .main{
            width: 100%;
            color: #fff;
        }
        h3{
            width: 110px;
            height: 30px;
            color: #fff;
        }
        .main div{
            width: 120px;
            height: 20px;
            padding: 0 10px;
            line-height: 20px;
        }
        ul li{
            list-style: none;
            width: 110px;
            height: 30px;
            padding: 0 15px;
            line-height: 30px;
        }
        ul .active{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h3>首页</h3>
        <div class="main">
            <div>用户管理</div>
            <ul>
                <li class="active">用户添加</li>
                <li>用户删除</li>
                <li>用户查看</li>
            </ul>
            <div>信息查询</div>
            <ul>
                <li>最近消息</li>
                <li>以前消息</li>
            </ul>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $('.main div').click(function(){
            $(this).next().slideToggle(200)
            $('h3').html($(this).html())  
        })
        $('li').click(function(){
            $('li').removeClass('active')
            $(this).addClass('active')
            $('h3').html($(this).html())
        })
    </script>
</body>
</html>

ajax

get方法$.get(url,[parma],callback)
post方法$.post(url,[parma],callback)
ajax方法

$.ajax({
        url:'http://localhost:3000/api',
        method:'get',
        data:{},
        success:function(data){
            console.log(data);
        },
        error:function(err){
            console.log(err);
        }
    })

跨域jsonp技术

$.ajax({
        url:'http://localhost:3000/api',
        method:'get',
        dataType:'jsonp',
        jsonp:'callback',//jsonp参数名
        jsonpCallback:'func',//服务端用于封装数据的函数名
        success:function(result){
            console.log(result);
        },
        error:function(err){
            console.log(err);
        }
    })

一杆老狙

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
js基础2-jQuery介绍

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档水水水水水文章目录前言一、jQuery是什么？二、使用步骤1.选择器介绍1.基本选择器2.层次选择器3.属性选择器4.伪类选择器表单伪类选择器：2.读入数据总结前言理论介绍一、jQuery是什么？ jQuery，顾名思义，也就是JavaScript和Query（查询），即辅助JavaScript开发的库。jQuery是全球最流行用得最多的JavaScript库。其实jQuery就是用JavaScript来写的，它.
复制链接

扫一扫