jQuery

Posted slookup

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery相关的知识,希望对你有一定的参考价值。

jQuery的常规操作

一、对CSS属性的操作

  1、有两个参数时,是对属性进行设置

    $(‘#p1‘).css(‘font-size‘,‘24px‘)

  2、只有一个参数时是获取属性

    $(‘#p1‘).css(‘font-size‘)

  3、一次设置多个属性,已字典的方式进行赋值

    $(‘#p1‘).css("border":"1px solid black","color":"blue")

 

二、位置操作

  1、加参数可以设置位置参数

    $(".c3").offset(top:284,left:400)

  2、不加参数可以获取位置参数

    $(".c3").offset()

  3、position 只能获取值,不能设置值

  4、$(‘window‘).scrollTop();    获取当前滚动条偏移量

     $(‘window‘).scrollTop(0);    设置滚动条偏移量

 

三、对盒子尺寸的设置   

  height()

  width()

  innerHeight()    返回窗口的文档显示区的高度。
  innerWidth()    返回窗口的文档显示区的宽度。
  outerHeight()    设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
  outerWidth()    设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。

 

四、文本操作

 text() html() 不加参数获取值,加参数设置值
 val() 不加参数获取值,加参数设置值

 

五、属性操作

 获取文本属性
  $(‘#d1‘).attr(‘s1‘)   // 获取属性值
  $(‘#d1‘).attr(‘s1‘,‘haha‘)    // 设置属性值
  $(‘#d1‘).attr(‘num‘:50,‘taidi‘:‘gay‘)    // 设置多个属性
  $(‘#d1‘).removeAttr(‘taidi‘)   // 删除一个属性

 获取check与radio标签的checked属性
  $(‘#i1‘).prop(‘checked‘)
  $(‘#i1‘).prop(‘checked‘,true)

 

六、文档处理

 标签内部尾部追加元素
  $(‘#d1‘).append(pEle)
  $pEle.appendTo($(‘#d1‘))

 标签内部头部添加元素
  $(‘#d1‘).prepend(pEle)
  $pEle.prependTo($(‘#d1‘))

 标签外部下面添加元素
  $(A).after(B)// 把B放到A的后面
  $(A).insertAfter(B)// 把A放到B的后面

 标签外部上面添加元素
  $(A).before(B)// 把B放到A的前面
  $(A).insertBefore(B)// 把A放到B的前面

 替换标签
  replaceWith()    // 什么被什么替换
  replaceAll()    // 拿什么替换什么

// 克隆事例
<button id="b2">hello,world!</button>
// clone方法加参数true,克隆标签并且克隆标签带的事件
$("#b2").on("click", function ()
  $(this).clone(true).insertAfter(this);    // true参数
);

 

自定义登录校验示例

技术图片
<form action="">
  <div>
    <label for="input-name">用户名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密码</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () 
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) 
      $("#input-name").siblings(".error").text("用户名不能为空");
    
    if (password.length === 0) 
      $("#input-password").siblings(".error").text("密码不能为空");
    
  )
</script>

<!--js代码取消默认事件的方式-->
return false
主体代码

 

jQuery事件

 

一、克隆标签:默认情况下只克隆标签的文本和样式不克隆事件

技术图片
$(‘button‘).on(‘click‘,function () 
        $(this).clone().insertAfter(this);
    )
View Code

 

 

二、绑定事件的两种方式

  第一种

    $(‘div‘).click(function()

      事件代码
    )

 

  第二种(推荐使用第二种,因为第一种可能会报错)

    $(‘div‘).on(‘事件名‘,function()
      事件代码
    )

 

三、取消标签自带的事件有两种方式

  第一种:

    return false

  第二种:
    $(‘input‘).click(function (e)
    alert(123);
      e.preventDefault();
    )

 

四、事件冒泡:事件会一层层往上一级汇报

    如何组织事件冒泡:

      在你的事件函数内部加一句取消事件冒泡的代码

        $(‘p‘).click(function (e)

          alert(‘p‘);
          e.stopPropagation()  //注意这里的e参数不能省略
        );

  

五、事件委托:将触发的事件委托给内部某个标签去执行

  无论该标签是初始化就有还是后期动态添加都可以执行

  $(‘body‘).on(‘click‘,‘button‘,function ()

    alert(123)
  )

 

六、文档加载

  三种方式:

    第一种(了解):

      $(document).ready(function()

        // 在这里写你的JS代码...
        )

    第二种(了解):

      $(function()

      // 你在这里写你的代码

      )

    第三种(推荐):

      直接在body 内部最下方书写代码

 

六、jQuery自带的动画效果

技术图片
// 标签记得设置高和宽

$(‘img‘).hide(5000)
$(‘img‘).show(5000)

$(‘img‘).slideDown(5000)
$(‘img‘).slideUp(5000)

$(‘img‘).fadeIn(5000)
$(‘img‘).fadeOut(5000)
$(‘img‘).fadeTo(5000,0.4)
View Code

 

 

七、each()

技术图片
$.each(array,function(index)
  console.log(array[index])
)

$.each(array,function()
  console.log(this);
)

// 支持简写
$divEles.each(function()
  console.log(this)  // 标签对象
)
View Code

 

 

八、data()

技术图片
$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
$("div").data("k");//返回第一个div标签中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k对应的数据
View Code

 

以上是关于jQuery的主要内容,如果未能解决你的问题,请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段