首页 前端知识 jquery语法

jquery语法

2024-08-04 00:08:23 前端知识 前端哥 88 602 我要收藏

1. 类名操作

$('div').addClass('box') //为所有匹配到的元素添加box类名
$('div').removeClass('box') //为所有匹配到元素删除box类名
$('div').toggleClass('box') //为所有匹配到的元素切换类名 (匹配的元素拥有当前类名则去掉,没有则添加)
$('div').addClass('box1 box2') //多个类名之间空格隔开

2. dom显示隐藏

// 利用display属性操作
$('div').show() //显示匹配到的元素 display 的值为非none
$('div').hide() //隐藏匹配到的元素  display 的值为none
$('div').toggle() //切换到另一个状态(显示->隐藏 || 隐藏->显示) display的值为none或非none

3. dom结构添加

$('.box').append('<p>新内容</p>') //在元素结尾(内部)插入指定内容
$('<p>新内容</p>').appendTo('.box') //与append唯一的区别是 参数位置交换
$('.box').prepend('内容') //在元素头部(内部)插入指定内容
$('.box').after('<p>新内容</p>') //在元素之后插入指定内容(作为兄弟节点存在)
$('.box').before('<p>新内容</p>') //在元素之前插入指定内容,与after相反(作为兄弟节点存在)


4. 插入样式

1. 单个属性写法

$('.box').css('width', 100) // 给元素添加宽度100px
$('.box').css('height', 100) // 给元素添加高度100px
$('.box').css('background', '#fffc9b') // 给元素添加背景色

2. 多个属性写法(跟单个写法效果无差别)
     - 有`-`连接的属性可以把`-`后一个字母变成大写`font-size 改为 fontSize`
     - 有`-`连接的属性可以把属性用单引号或双引号包裹起来`font-size 改为 'font-size'`

$('.box').css({
    width: 100,
    height: 100,
    background: '#fffc9b',
    fontSize: 20, // 给元素设置字体大小
    'font-weight': 700 // 给元素设置字体加粗
})

5. ajax接口请求

$.ajax({
  url:'/user',//接口
  type:'post',//请求方式
  data:{//向后台发送参数
      id:'10'
  },
  async:true,//请求是否异步(默认异步)
  dataType:'json'//规定返回数据的格式
  beforeSend:function(){
    //请求前的回调
  },
  success(result){
    //请求成功时的回调    
  },
  complete:(){
    //请求完成的回调
  },
  error(err){
    //请求失败的回调
  }  
})

6.屏幕距离获取

//鼠标距离当前块左上角距离
  e.offsetX
  e.offsetY
//鼠标距离当前页面根节点左上角距离
  e.clientX
  e.clientY
//鼠标距离当前屏幕左上角距离
  e.screenX
  e.screenY

[待续]...

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14718.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!