jQuery快速入门

找到div标签并给div标签设置为红色

// 原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
​
// jQuery操作
$('#d1').css('color','blue');

什么是jQuery？

• 是一个工具，简单方便实现DOM操作

• python里可能叫模块贴切一点，但在前端叫"类库"

jQuery学什么？

• 查找标签

• 修改属性样式

• 事件

• Ajax异步请求

• 插件机制

使用注意事项

• 一定要先导入后使用

基础语法

$(selector).action()
​
// 样式演变，原本应该
jQuery();
// 为了简化
$();

标签查找

找标签的总格式:$("")

介绍三种最基本的找法

id查找

类名查找

标签查找

组合查找

• 提出注意点，原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象

  // DOM对象与jQuery对象互相转换
  $('#d1')[0]
  var d1Ele = document.getElementById('d1');
  $(d1Ele)

• 层级选择器

  后代

  儿子

  毗邻

  弟弟

• 基本筛选器

  // 用ul标签举例
  $('#ul>li:first')
  $('#u1>li:last')
  $('#ul>li:eq(3)')
  $('#ul>li:even')
  $('#ul>li:odd')
  $('#ul>li:gt(3)')
  $('#ul>li:lt(3)')
  $('#u1>li:not(.c1)')
  ​
  // 最后一个has的玩法需要写个三个div
  // 一个空div
  // 一个儿子有a标签
  // 一个儿子没有a，孙子有a标签
  $('div:has(a)')

• 样式操作(原生DOM和jQuery实现标签红绿变幻)

  addClass();// 添加指定的CSS类名。
  removeClass();// 移除指定的CSS类名。
  hasClass();// 判断样式存不存在
  toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

• jQuery操作模态框显隐(类添加隐藏类)

• 表单筛选器

  # 针对表单内的标签
  $('input[type="text"]')
  # 简化写法
  $(':text')
  ​
  # 找到所有被选中的checkbox
  $(':checked')  # 注意select框中默认selected标签也会被找到
  $('input:checked')

• 筛选器方法

  # 避免$('input:first')太麻烦
  $('input').first()
  ​
  $("#id").next()
  $("#id").nextAll()
  $("#id").nextUntil("#i2")
  ​
  $("#id").prev()
  $("#id").prevAll()
  $("#id").prevUntil("#i2")
  ​
  $("#id").parent()
  $("#id").parents()  // 查找当前元素的所有的父辈元素
  $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
  ​
  $("#id").children();// 儿子们
  $("#id").siblings();// 兄弟们

• jQuery链式操作

• $('div>p').first().addclass('c1').next().addclass('c2');

直接操作css属性

// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')
​
// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})

位置操作

// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})
​
// position只能获取值，不能设置值
​
// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 设置滚动条偏移量

尺寸

// 盒子模型测试下列参数
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
// 加参数标签设置值

文本操作

// text() html() 不加参数获取值，加参数设置值
​
// val() 不加参数获取值，加参数设置值

自定义登陆校验

<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

属性操作

// 获取文本属性
$('#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">屠龙宝刀，点击就送</button>
// clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true参数
  });

事件

// click事件以上面的克隆案例为参考

// hover事件
$('p').hover(  // 写两个函数一个表示鼠标移进去，另一个标示鼠标移出来
  function () {
    alert('来啦，老弟')
  },
  function () {
    alert('慢走哦～')
  }
)
// input实时监听
    $('#i1').on('input',function () {
        console.log($(this).val())
    });

// focus/blur 其他同理js事件

// 取消标签默认的事件
return false
$('input').click(function (e) {
        alert(123);
        // return false
        e.preventDefault();
    });


// 事件冒泡
div>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });

// 事件委托
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

文档加载

$(document).ready(function(){
// 在这里写你的JS代码...
})

$(function(){
// 你在这里写你的代码
})

jQuery自带的动画效果

// 标签记得设置高和宽

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

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

$('img').fadeIn(5000)
$('img').fadeOut(5000)
$('img').fadeTo(5000,0.4)

each()

$.each(array,function(index){
  console.log(array[index])
})

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

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

data()

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