JQuery

1.JQuery的$基本使用

//弹出123 
$(function(){
      alert(123)
 });

2.JQ获取DOM对象

let myDiv =document.querySelector('div'); //JS获取的div标签是DOM对象

$('div'); //JQ获取的div标签是jq对象,是一个伪数组

//jq对象只能使用jq的方法,DOM对象使用的是原生JS的属性和方法
myDiv.style.display='none';
$('div').style.display='none'; //错误写法

$('div').hide();
myDiv.hide();//错误写法

3.JQ对象和DOM对象转换

$('video');//DOM对象换位JQ对象,方法一

let myVideo = document.querySelector('video');//DOM对象换位JQ对象,方法二
$('myVideo'); 

$('video')[0].play();//jq对象转换为dom对象使用原生js的方法[索引号]
$('video').get(0).play();//jq对象转换为dom对象使用原生js的方法(索引号)

4.JQ获取选择器

$(function(){
    $('.类选择器');
    $('#ID选择器');
    $('标签选择器');
    $('css选择器中的所有写法');
})

5.JQ设置样式

$(function(){
  	$('div').css('background','red');//修改背景颜色为红色
})

$(function(){
  $('div').css(
  color:'white', //字符串加引号
  font-size:'20px',
  width:400  //数字可以不加
)  
});
$('div').css('background'); //只写属性名会返回属性的值

6.JQ添加一个class

.one{color:red;}

$(function(){
$('div').addClass('one'); //给div添加一个类

$('div').removeClass('one'); //给div删除一个类

$('div').toggleClass('one'); //给div切换不同的类
  
})

7.JQ操作className

<div class='one'></div>	

//js
let one = document.querySelector('.one');
one.className = 'two'; //把one修改成two

//jq
$('.one').addClass('two'); //在one的后面加上一个two

8.JQ属性操作

1.获取和修改固有属性

$('a').prop('href');//获取a标签中的href属性值

$('a').prop('title','进行标题的修改'); //修改a标签的href属性值

2.获取和修改自定义属性

<div index='自定义属性'></div>	

$('div').attr('index');//获取div标签中的index属性值

$('a').prop('index','修改自定义'); //修改div标签的index属性值

9.JQ数据缓存data

<span>123</span>
<div data-index='2'></div>	

//数据缓存data() 这个里面的数据是存放在元素的内存里面
$('span').data('name','哈哈'); //设置

console.log($('span').data('name')); //打印

//这个方法获取data-index h5的自定义属性 不用写data,而且返回的是数字型

console.log($('div').data('index')); //打印,2

10.JQ获取内容文本值

<div>
<span>我是内容</span>	
</div>	
<input type='text' value='请输入内容'>

//获取标签内容,相当于innerHTML
$('div').html();//<span>我是内容</span>	

//修改标签内容,相当于innerHTML
$('div').html('123');<div>123</div>

//获取文本内容,相当于innerText
$('div').text();//我是内容

//获取文本内容,相当于innerText
$('div').text(123);//<div>123</div>

//获取表单中的内容
$('input').val();//请输入内容

//修改表单中的内容
$('input').val('修改修改');//修改修改

11.JQ进行元素遍历操作

//each() 方法遍历元素

$(function(){
  
  $('div').each(function(index.domEle){
    //index,遍历出来的索引号
    //domEle,遍历出来的DOM对象
  })
  
})
//$.each() 方法遍历元素

$(function(){
  
  $.each($('div'),funciton(index,domEle){
	//index,遍历出来的索引号
  //domEle,遍历出来的DOM对象
})

})

12.JQ事件注册

$(function(){
        //单个事件绑定
      $('div').click(function(){
        $(this).css('width','red');
      });

      $('div').mouseenter(function(){
        $(this).css('width','red');
      });
  
})



$(function(){  
      //多个事件绑定
    $('div').on({
      mouseenter:function(){
        $(this).css('width','red');
      },
       click:function(){
        $(this).css('width','blue');
      },
    });
  
})



$(function(){
  	//一个函数绑定多个事件
$('div').on('mouseenter moseleave',function(){
  $(this).toggleClass("hahacss");
})

})

13.JQ事件委托

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
$(function(){
    $('父元素').on("事件类型",'子元素','事件内容');

    $('ul').on('click','li',function(){
      alert(11);
    });
    //click绑定在ul身上,触发的对象是ul里的li
})

14.JQ解绑事件

$(function(){
  
      $('div').on({
        mouseenter:function(){
        console.log('鼠标经过了');
      },
       click:function(){
        console.log('鼠标点击了');
      },
    })
  
  #解绑事件
$('div').off(); //解除div上所有的事件

$('div').off('click'); //解除div上的click事件

#解绑事件委托
$('ul').off('click','li'); //解除ul上的事件委托
  
  
})

15.JQ只触发一次的事件

$(function(){
      //one
    $('p').one('click',function(){
      alert(111);
    });
})

16.JQ自动触发事件

$(function(){
  $('div').on('click',function(){
});
  //自动触发事件
  //1:元素.事件
  $('div').click();
  
  //2:元素.trigger('事件')
  $('div').trigger('click');
  
  //3:元素.triggerHandler('事件'),不会触发元素的默认行为,列入输入框的焦点
  $('div').triggerHandler('click');
})

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!