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代码诠释链式调用,其实就是在调用方法之后讲对象再次返回