jQuery-实例方法

最新推荐文章于 2022-06-07 01:06:38 发布

crystal_iwwish

最新推荐文章于 2022-06-07 01:06:38 发布

阅读量422

点赞数

分类专栏：前端学习之jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/crystal_iwwish/article/details/120905203

版权

前端学习之jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.事件

jQuery对DOM事件的监听进行了封装，分为以下三种：

第一种：快捷方法

 $('input').click(function () {
    console.log('this')
  })  //this指向dom对象

第二种：基础方法(推荐)

//on 或者 bind是绑定事件
$('input').on("click",function () {
  console.log('点击点击')
// })

//off 或者 unbind是解绑事件
    $('input').off("click")
//一次性事件
 $('button').one('click', function () {
    console.log('付款中...');
  })

bind和unbind老版本，用法和on、off一样

第三种：自定义事件—>只能通过trigger触发

$('input').on('myevent',function () {
  console.log('自定义事件')
})
$('input').trigger('myevent')//trigger用于自动触发事件

★★★基础方法和快捷方法的区别：

1.on可以同时绑定多个事件

// 添加多个事件，处理函数相同
$('input').on("click mouseleave",function () {
console.log('点击点击')
 })
//添加多个事件，处理函数不同
$('input').on({
  click:function(){
    console.log(1)
  },
  mouseleave:function(){
    console.log(2)
  }
})

2.即使是动态创建的元素，也会有事件的

$('<li>新的</li>').appendTo('ul')
$('ul').on('click','li',function(){
  this.style.color='red'
})

3.on能实现事件委派，事件委派时，this指向的是需要执行样式的元素

$('ul').on('click','li',function(){
this.style.color='red'
})

2.样式：

行内样式（css方法）

是通过行内样式改变的，

想加什么样式，就通过css 写属性名，值

 $('input').css({
    background:'red',
    color:'blue',
   height:'100px',
    transform:'scale(.2)',
   'font-size':66,//js中没有-，复合属性给属性加引号，或者是改成小驼峰
  })

类名操作

jQuery 中封装了为网页元素添加、移除、检测、切换类名的方法。

 $('input').click(function(){
    // 添加类：addClass
    $('div').addClass('c2')
    // 移除类：removeClass
    $('div').removeClass('c2')
    //切换类名：toggleClass
    $('div').toggleClass('c2')
    //检测类名：hasClass
    console.log($('div').hasClass('c2'))
  })

3.链式：

原理：在方法执行完成之后返回他的调用者
一种简便的语法结构，从左到右依次执行

  $('button').click(function () {
    // 连续调用多个实例方法
    $('.box')
      .css('width', 240) // 改变 style 属性
      .addClass('active') // 添加类名
      .click(function () { // 添加单击事件
      	$(this).off('click');
      	console.log('单击事件被触发...');
    })
  })

4.查找

父子关系

find方法：找某个后代
children:只找儿子
parent：找父亲
parents：找祖先

 // find方法：找某个后代
 console.log( $('.box').find('.p2'))
  //children:只找儿子
  // 不加参数找到所有儿子，加参数找到对应的儿子
  console.log( $('.box').children('div'))
  //找父亲
  // 文档document最大 jswindow最大
  console.log( $('.box2').parent().parent().parent())
  //上级（祖先）元素：
  console.log( $('.box2').parents())

兄弟关系

siblings方法找到所有兄弟
prevAll：前面的所有兄弟
prev：前一个兄弟
nextAll：后面的所有兄弟
next：后一个兄弟

 // siblings方法 找到所有兄弟
$('.box2').siblings().css('background','red')

// prevAll：前面的所有兄弟
// prev：前一个兄弟
// nextAll：后面的所有兄弟
// next：后一个兄弟
<body>
 <ul>
   <li>11111</li>
   <li>11111</li>
   <li>11111</li>
   <li class="li4">11111</li>
   <li>11111</li>
   <li>11111</li>
   <li>11111</li>
   <li class="li8">11111</li>
   <li>11111</li>
   <li>11111</li>
 </ul>
</body>


<script>
$('.li8').siblings().css("background",'skyblue')
$('.li8').prevAll().css("background",'red')
$('.li8').prevAll('.li4').css("background",'blue')
$('.li8').prev().css("background",'pink')
$('.li8').nextAll().css("background",'green')
$('.li8').next().css("background",'yellow')
</script>

筛选

first:筛选出第一个
last:筛选最后一个
eq：根据索引值筛选某一个元素

 // first:筛选出第一个
  $('li').first().css('color','red')
// last:筛选最后一个
  $('li').last().css('color','yellow')
  // eq：根据索引值筛选某一个元素
  $('li').eq(2).css('color','orange')
  // 扩展：
  $('li:eq(5)').css('color','orange')

属性

prop:操作固有属性
attr:操作自定义属性
data:用于data-xxx

// prop:操作固有属性
$('div').prop('id','wahaha')
//attr:操作自定义属性
console.log($('div').attr('bidSrc'))
$('div').attr('data-ha','oxoxoxoxox')
// data:用于data-xxx
console.log($('div').data('ha'))

文本

1.html相当于原生的 innerHTML，能够解析文本中的 html 标签
2.text相当于原生的 innerText ，它无法解析 html 标签
3.没有参数用于读取内容

<div class="box"></div>
<script>
//html相当于原生的 innerHTML，能够解析文本中的 html 标签
  $('.box').html('<h4>学习jQuery</h4>');
//text相当于原生的 innerText ，它无法解析 html 标签
  $('.box').text('<h4>学习jQuery</h4>');
//没有参数用于读取内容
$('.box').html()
</script>

crystal_iwwish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-实例方法

1.事件jQuery对DOM事件的监听进行了封装，分为以下三种：第一种：快捷方法 $('input').click(function () { console.log('this') }) //this指向dom对象第二种：基础方法(推荐)//on 或者 bind是绑定事件$('input').on("click",function () { console.log('点击点击')// })//off 或者 unbind是解绑事件 $('input').off(
复制链接

扫一扫

专栏目录