JS基础19

jquery

  1. jquery是一个快速,小巧且功能丰富的JS库,也就是JS封装的JS文件
  2. 操作html文档节点
  3. 操作dom节点更方便
  4. 兼容性
  5. 下载:
  • 官网下载https://jquery.com/
  • 方法大全https://jquery.cuishifeng.cn/
  1. 语法$(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"]')); 
//
   console.log($('input[name]'))
// 

注:只写与原生JS不同属性

表单属性伪类

属性 含义
: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>
  1. $().addClass()
  2. $().removeClass()
  3. $().toggleClass()
  4. 示例:
<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>
  1. 解绑事件
    jquery后面事件不会覆盖前面事件,解绑需要$().unbind()
$('button').unbind('click').click(function(){})
//解绑以前事件,并重新绑定一个点击事件
  1. 移除事件
<script>
    $('button').on('click',function(){
        console.log('button点击了');
    })
     $('button').on('mousemove',function(){
        console.log('button点击了');
    })
    $('button').off('click')
//移除点击事件
    $('button').off()
//移除所有事件
</script>
  1. 只执行一次事件
$('button').one('click',function(){})
  1. 直接触发事件
    $('button').on('click',function(){
        console.log('自动执行');
    })
    $('button').trigger('click')
//代码走到此处直接触发点击事件
  1. 直接绑定事件,不用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. 创建节点
$('

').text('内容')

  1. 添加节点
<body>
    <div></div>
</body>
<script src="./jquery.js"></script>
<script>
    let pEle=$('

').text('内容') $('div').append(pEle) </script>

事件 含义
parent.append(child) 向父元素插入子元素,插入子元素为最后一个元素
child.appendTo(parent) 将子元素插入父元素,插入子元素为最后一个元素
parent.prepend(child) 向父元素插入子元素,插入子元素为第一个元素
child.prependTo(parent) 将子元素插入父元素,插入子元素为第一个元素
brother.after(obj) 在某个兄弟节点之后插入对象
brother.before(obj) 在某个兄弟节点之前插入对象
  1. 删除节点
  • $().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>
  1. 替换节点
  • $(‘div’).replaceWith(’

    ’)
  • $(‘div’).replaceAll(’

    ’)
    注:两者区别在于replaceWith只能替换一个节点,replaceAll可以替换里面所有节点
  1. 复制节点
    $().clone()

jquery与DOM节点转换

  1. jquery准换为DOM
  • const DOM=$()[0]
  • const Dom=$().get[0]
  1. DOM转换为jquery
    const DOMEle=document.querySelector(’.d’)
    const jquery=$(DOMEle)

元素尺寸

  1. 操作元素宽和高(不含padding和border)
语法 含义
$().width() 获取元素宽
$().width(n) 设置元素宽npx
$().height() 获取元素高
$().height(n) 设置元素高npx
  1. 获取元素内置宽和高(含padding不含border)
语法 含义
$().innerWidth() 获取元素宽
$().innerHeight() 获取元素高
  1. 获取元素外置宽和高(含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
  1. 元素相对于父元素的偏移量
    $().position()
    注:得到一个对象包含X和Y的值,父元素需要定位,只读
  2. 获取页面卷去的高度和宽度
语法 含义
$(document).scrollTop() 获取页面被卷起的高度
$(document).scrollLeft() 获取滚动条到左边垂直宽度
 $(document).scroll(function(){
        console.log($(document).scrollTop()); 
    })
//滚动时拿到滚动条距离页面顶部距离
  1. 通过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
  1. 淡入与淡出
语法 含义
jqueryObj.fadeIn() 通过淡出方式显示
jqueryObj.fadOut() 通过淡入方式隐藏
jqueryObj.fadToggle() 切隐藏与显示
 $('button').click(function(){
        $('div').fadeOut()
//立即淡入隐藏
        $('div').fadeOut(1000)
//1000ms慢慢隐藏
        $('div').fadeOut(1000,function(){
            console.log(1);
        })
//
    })
  1. 滑动
语法 含义
jqueryObj.slideDown() 用滑动动画显示
jqueryObj.slideUp() 用滑动动画隐藏
jqueryObj.slideToggle() 切换显示与隐藏
 $('button').click(function(){
      $('div').slideUp()
})
$('button').click(function(){
         $('div').slideUp(100,function(){
            console.log('完成');
        })
    })
//也可以传参,第一个代表规定时长,第二个表示完成后执行函数
  1. 动画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()
//结束当前动画重新执行
})
  1. 示例:做一个菜单栏
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>Documenttitle>
    <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

  1. get方法$.get(url,[parma],callback)
  2. post方法$.post(url,[parma],callback)
  3. ajax方法
$.ajax({
        url:'http://localhost:3000/api',
        method:'get',
        data:{},
        success:function(data){
            console.log(data);
        },
        error:function(err){
            console.log(err);
        }
    })
  1. 跨域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);
        }
    })

jquery扩展

扩展jquery本身
       jQuery.extend({
            max:function(m,n){
                let max=m;
                if(n>max){
                    max=n
                }
                return max
            }
        })
        console.log($.max(20,40));
//结果40

//扩展jquery元素集
        jQuery.fn.extend({
            min:function(m,n){
                let min=m;
                if(n<min){
                    min=n
                }
                return min
            }
        })
        console.log($('div').min(20,40));
//结果20 

你可能感兴趣的:(JS基础,前端,javascript,开发语言,jquery)