jQuery常用属性

jquery

获取jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
        
    <!--1.cdn加速，一般使用百度的
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
    <!--2.去官网下载jquery-->
    <!--3.npm i jquery-->
</body>
</html>

选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <div id="div1"></div>
  <ul >
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
      <li class="liC"></li>
  </ul>
  <ul></ul>
</body>
</html>
<script>
  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
  console.log($(\'.liC\'))
  console.log($(\'ul\'))
  console.log($(\'ul,div\'))//并集选择器
  console.log($(\'ul>li\'))//jq子代选择器
  console.log($(\'#div1+ul\'))//选择jq紧邻的一个弟弟元素，，一个选择器，并且它作为第一个选择器的同辈
  console.log($(\'#div1~ul\'))//选择自身以后所有的弟弟元素
  $(\'ul\').one(\'mousemove\',function(){
      console.log(\'ulmove\')
  })

</script>

事件

ready

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

 $(document).ready(function(){
  alert(\'啦啦啦\')
});

on

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

$(\'button\').on(\'click\',function () {
    $(\'div\').fadeToggle()
  })

off

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

 $(\'button\').off(\'click\')

one

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

 $(\'ul\').one(\'mousemove\',function(){
      console.log(\'ulmove\')
  })

hover

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

 $(\'button\').hover(function(){
     $(\'div\').css(\'color\',\'yellow\')},function(){
        $(\'div\').css(\'color\',\'green\')
     }
 )

change

当元素的值发生改变时，会发生 change 事件。

$("input[type=\'text\']").change( function() {
        $(\'div\').css(\'color\',\'red\')
    });
//当input的值发生改变时（也就是输入数据时），字体颜色改变

jquery鼠标事件

click

当点击元素时，会发生点击事件。

 $("p").click(function () {
    $(\'p\').css(\'color\',\'red\')
    });

dblclick

当双击元素时，会发生 dblclick 事件。

 $("div").dblclick(function () {
        $(\'div\').css(\'color\',\'#fac\')
    });

mousedown

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

mousemove

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout

当鼠标指针从元素上移开时，发生 mouseout 事件。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

mouseover

当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseup

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

jquery窗口事件

blur

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

 $(\'input[type="text"]\').blur(function () {
 $(\'div\').css(\'color\',\'yellow\')
 })

focus

当元素获得焦点时，触发 focus 事件。

$("input[type=text]").focus(function(){
        this.blur();
    });//当获得焦点时，无法使用此文本框

focusin

当元素获得焦点时，触发 focusin 事件。

focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

 $("input[type=text]").focusin(function(){
        $("div").css(\'color\',\'red\')
    });

focusout

当元素失去焦点时触发 focusout 事件。

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

 $("input[type=text]").focusout(function(){
        $("div").css(\'color\',\'yellow\')
    });

jquery键盘事件

keyDown

当键盘或按钮被按下时，发生 keydown 事件。

 $(window).keydown(function(event){
        switch(event.keyCode) {
            case 27:
                console.log(\'esc\')
                break;
            case 13:
                console.log(\'Enter\')
                break;
            // 不同的按键可以做不同的事情
            // 不同的浏览器的keycode不同
            // 常用keyCode： 空格 32   Enter 13   ESC 27
        }
    });

keypress

当键盘或按钮被按下时，发生 keypress 事件。

keyUp

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

resize

当调整浏览器窗口的大小时，发生 resize 事件。

$(window).resize(function(){
        alert("Stop it!");
    });

属性

attr（返回或设置属性）

设置或返回被选元素的属性值。

//返回文档中所有图像的src属性值。也就是图像的地址
$("img").attr("src");
//为所有图像设置src和alt属性。设置多个属性
$("img").attr({src:"img.jpg",alt:"图片"})
//为所有图像设置src属性。设置单个属性
$("img").attr("src","img.jpg");

removeAttr（删除属性）

从每一个匹配的元素中删除一个属性

$("img").removeAttr("src");
//只能删除一个属性

prop

获取在匹配的元素集中的第一个元素的属性值。

removeProp

用来删除由.prop()方法设置的属性集

prop,removeProp两个难以理解，需要重点关注

属性CSS类

addClass

为每个匹配的元素添加指定的类名。

//添加一个类名
$(\'img\').addClass(\'img\') //为img标签添加img类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

$("p").removeClass("selected")//从匹配的元素中删除 \'selected\' 类
$("p").removeClass()//删除匹配元素的所有类

toggleClass

如果存在（不存在）就删除（添加）一个类。

$("img").toggleClass("selected")
//有class类名，就删除
//没有class类名，就添加

HTML代码/文本/值

html

取得第一个匹配元素的html内容。

设置匹配元素的html内容

这个函数不能用于XML文档。但可以用于XHTML文档。

//使用方式
//返回p元素的内容。(也就是获取p元素里面的内容)
$(\'p\').html();
//设置所有 p 元素的内容,(这会清空原先p标签里面的内容，然后再添加)
$(\'p\').html(\'hello\');
//使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
        return "这个 p 元素的 index 是：" + (n+1);
    });

text（文本）

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

//返回p元素的文本内容。他会获取所有的p元素的文本内容并将他们拼接起来返回
$(\'p\').text()
//设置所有 p 元素的文本内容
$(\'p\').text(\'hello\')
//使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

val（值）

获得匹配元素的当前值，也可以设置匹配元素的当前值

//获取文本框中的值
$("input").val();
//设定文本框的值
$("input").val("hello world!");
//使用函数设置文本框的值
$(\'input:text.items\').val(function() {
  return this.value + \' \' + this.className;
});

CSS

jquery获取css样式方式（两种）


    $(\'#div1\').css(\'color\',\'yellow\')//单行css样式

    $(\'#div1\').css({//多行css样式
      \'color\':\'red\',
      \'background\':\'lightblue\',
      "width":"100px"
    })

位置

offset

获取匹配元素在当前视口的相对偏移。也就是left和top

<p>Hello</p><p>2nd Paragraph</p>
<script>
    const p = $("p:last");//选择最后一个符合条件的元素
    const offset = p.offset();//获取元素的位置
    p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

position

获取匹配元素相对父元素的偏移。也就是匹配元素在已定位元素的位置

 <style>
        div{
            width: 300px;
            height: 300px;
            position: relative;
            background: #c4c7ce;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: #8ed047;
        }
    </style>
</head>
<body>
<div>
    <div id="div1"></div>
</div>
<p></p>
</body>
</html>
<script>
    const div1 = $("#div1");
    const position = div1.position();
    $("p").html( "left: " + position.left + ", top: " + position.top );
</script>

尺寸

height

取得匹配元素当前计算的高度值（px）。获取或设置元素的高度

width

取得第一个匹配元素当前计算的宽度值（px）。获取或设置元素的宽度

innerHeight

获取第一个匹配元素内部区域高度（包括补白（padding）、不包括边框）。

innerWidth

获取第一个匹配元素内部区域宽度（包括补白（padding）、不包括边框）。

outerHeight

获取第一个匹配元素外部高度（默认包括补白和边框（border））。

outerWidth

获取第一个匹配元素外部宽度（默认包括补白和边框（border））。

效果

基础效果

show

显示隐藏的匹配元素。

<body>
<p style="display: none">Hello</p>
</body>
</html>
<script>
    $(\'p\').show()
</script>

hide

隐藏显示的元素

<body>
<p>Hello</p>
</body>
</html>
<script>
    $(\'p\').hide()
</script>

toggle

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

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

$(\'button\').on(\'click\',function () {
        $(\'p\').toggle()
    })

滑动效果

slideDown

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

以滑动方式显示隐藏的元素

$(\'div\').slideDown()

slideUp

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数

$(\'div\').slideUp()

slideToggle

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

动态的滑落或滑起//当元素隐藏时滑落，当元素显示时滑起

或通过点击事件来实现滑起或滑落

$(\'div\').slideToggle()
//也可通过点击重复使用此函数
 $(\'button\').on(\'click\',function () {
        $(\'div\').slideToggle()
    })

淡入淡出效果

fadeIn

有两种参数：速度和透明度(必须)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

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

$(\'div\').fadeIn()//由透明到不透明的变化

fadeOut

有两种参数：速度和透明度(必须)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

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

$(\'div\').fadeOut()//由不透明到透明的变化

fadeTo

有两种参数：速度和透明度(必须)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

动态的淡入或淡出//当元素隐藏时淡入，当元素显示时淡出

  $(\'div\').fadeTo(\'slow\',0.5) //

fadeToggle

有两种参数：速度和透明度(必须)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

动态的淡入或淡出//当元素隐藏时淡入，当元素显示时淡出

也可以通过点击事件来实现淡入或淡出

    $(\'button\').on(\'click\',function () {
        $(\'div\').fadeToggle()
    })

文档处理

内部插入

append(在元素的后面插入)

向每个匹配的元素内部追加内容。

  $(\'p\').append(\'<b>Myfirend</b>\')//在P里面插入b
// 效果：<p>hello<b>Myfirend</b></p>

appendTo(在元素的后面插入)

把所有匹配的元素追加到另一个指定的元素元素集合中。

$(\'p\').appendTo(\'#div1\') //将P插入到div1中

prepend

向每个匹配的元素内部前置内容。

  $(\'p\').append(\'<b>Myfirend</b>\')//在P前面插入b
  // 效果：<p><b>Myfirend</b>hello</p>

prependTo

把所有匹配的元素前置到另一个、指定的元素元素集合中。

$(\'#p1\').prependTo(\'#div2\')

外部插入

after

在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>");
//结果：
//<p>I would like to say: </p><b>Hello</b>

before

在每个匹配的元素之前插入内容。

insertAfter

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

//<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
//结果:<p>I would like to say: </p><div id="foo">Hello</div>

insertBefore

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。