jQuery是什么东东？？

我不休息我还能学    ⊂(‘ω’⊂ )))Σ≡=─༄༅༄༅༄༅༄༅༄༅

 

---------------------不定时的更新叕开始了，且更且珍惜------------------------ 

我要每次都写一遍：前面的还没补完，以此催促不定时更新的我
------------------------------------------------------------------------------------------------

 

jQuery

​

♢什么是jQuery？

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

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

♢jQuery学什么？

• 查找标签

• 修改属性样式

• 事件

• Ajax异步请求

• 插件机制

♢使用注意事项

• 一定要先导入后使用

♢基础语法

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

 jQuery与原生就是操作的区别

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

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

 

☄标签查找

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

　　▶ 介绍三种最基本的找法

　　　　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
  $(':checkbox')  # 注意select框中默认selected标签也会被找到
  $('input:checkbox')

• 筛选器方法

  # 避免$('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>p1</p>
      <p>p2</p>
  </div>
  ​
  $('div>p').first().addclass('c1').next().addclass('c2');
  ​
  # python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回