jQuery的运用

const div1=document.getElementById('div1')//js获取dom
// $('#div1')//jquery获取dom

// js dom和jq dom可以相互转换
console.log($(div1))//js dom ==>jq dom
console.log($('#div1')[0])//jq dom==>js dom

很容易就可以看出来 js获取document代码多而且不简洁，用jQuery获取document就简便了很多，在后期整理代码时行数也会少。

jQuery事件

ready（fn）

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

on

在选择元素上绑定一个或多个事件的事件处理函数。

.on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

也就是说给指定元素上添加一个事件

代码如下

$('#div1').on('mousemove',function () {
    console.log('move')
  })//鼠标移动到上面的时候
  $('#div1').on('mousedown',function () {
    console.log('down')
  })//鼠标点击的时候

off

在选择元素上移除一个或多个事件的事件处理函数。

off() 方法移除用.on（）绑定的事件处理程序。

也就是给指定元素删除一个事件

$('#div1').off('mousedown','mousemove')
//删除div1的mousedown和mousemove事件

one

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$('ul').one('mousemove',function () {
    console.log('ulmove')
  })//是一次性的事件，所以把定义和删除合二为一，更为便捷

hover

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上面时会发生的事件

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

blur

当元素失去焦点时，发生 blur 事件。

$('input[type="text"]').blur(function () {
    $('#div1').css('color','yellow')//设置单行css样式时的格式
    $('#div1').css({
      'color':'red',
      'background':'lightblue',
      "width":"100px"
    })//设置多行css样式时的格式
     
  })

jQuery效果

基本格式都为

元素.效果([速度]，[切换效果]，[动画完成后执行的函数])

部分效果如下：

show

显示隐藏的匹配元素。

hide

隐藏显示的元素

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

fadeToggle

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut通过不透明度的变化来实现所有匹配元素的淡出效果，

fadeTo把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，

slideToggle

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

slideDown则是向下增大，来动态地显示所有匹配的元素，

slideUp则是向上减小，来动态地隐藏所有匹配的元素，

CSS

访问匹配元素的样式属性。

$("p").css("color","red");

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });

posted @ 2021-12-09 11:09 小岳的库阅读(69) 评论(0) 收藏举报

刷新页面返回顶部