jQuery

Posted 2021-12-20 slookup

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