0
0

JS基础19

jquery

  1. jquery是一个快速，小巧且功能丰富的JS库，也就是JS封装的JS文件
  2. 操作html文档节点
  3. 操作dom节点更方便
  4. 兼容性
  5. 下载：
  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"]'));//<input type="name" name="name">
   console.log($('input[name]'))// <input type="name" name="name"><input type="name" name="password">

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

表单属性伪类

属性含义:checked选中的表单元素，一般用于radio和checkedoption: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. 创建节点
$('<p>').text('内容')
  1. 添加节点
<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)将子元素插入父元素，插入子元素为第一个元素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转换为jqueryconst 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）

    获取元素位置

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

  5. 元素相对于父元素的偏移量$().position() 注：得到一个对象包含X和Y的值，父元素需要定位，只读

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

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

  7. 通过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()//结束当前动画重新执行})
  1. 示例：做一个菜单栏
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="wrap"><h3>首页</h3><divclass="main"><div>用户管理</div><ul><liclass="active">用户添加</li><li>用户删除</li><li>用户查看</li></ul><div>信息查询</div><ul><li>最近消息</li><li>以前消息</li></ul></div></div><scriptsrc="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
标签： 前端 javascript 开发语言
本文转载自: https://blog.csdn.net/weixin_64925940/article/details/124131054
版权归原作者 鹏程933 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS基础19”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航