陈紫怡-20221117-jQuery-01

一、今日学习内容：

• 定义
  
  • 一个快速的、小巧的、功能丰富的js库
    
  • jQuery文件中暴露了一个对象给window......$
    
• 特点
  
  • 独特的选择器
    
  • 链式的dom操作
    
  • 事件绑定机制
    
  • 出色的浏览器兼容性
    
  • 封装完善的Ajax请求
    
• jQuery的选择器
  
  • 匹配模式，匹配规则
    
  • 作用：寻找、查找元素
    
  • 语法
    
    • $('选择器')  ===   jQuery（'选择器'）
      
  • 基本选择器
    
    • id选择器----$('# id')  
      
    • class选择器----$('.class')
      
    • 标签选择器----$('标签名')
      
  • 层级选择器
    
    • 子代选择器    $('父选择器>子选择器')
      
    • 后代选择器    $('父选择器>子选择器')
      
    • 兄弟选择器（下一个兄弟）    $('父选择器>子选择器')
      
    • 兄弟选择器（当前选择器后面所有的兄弟）    $('基础选择器1~基础选择器2')
      
  • 过滤选择器
    
    • 第一个    $('父选择器  子选择器：first')
      
    • 最后一个     $('父选择器  子选择器：last')
      
    • 第几个     $('父选择器  子选择器：last')
      
    • 除自己之外的所有同级兄弟元素     $('选择器').sibling（）
      
• jq对象与原生对象
  
  • $('选择器')
    
  • document.querySelect（'选择器')
    
  • 相互转换
    
    • jq对象转为原生对象：jq对象[0]     jq对象.get(0)
      
    • 原生对象转jq对象：原生对象----$(原生对象)
      
    • jq对象只能使用jq方法
      
    • 原生对象只能使用原生对象方法
      
    • $(this)----jq对象
      
    • this----原生对象
      
• 操作class
  
  • 添加类名  
    
    • jq对象.addClass('类名    类名   . . .')
      
  • 删除类名   
    
    • jq对象.removeClass()----删除所有
      
    • jq对象.removeClass('类名')----删除指定类名
      
  • 判断
    
    • jq对象.hasClass('类名')----判断是否含有----布尔值
      
  • 切换
    
    • jq对象.toggleClass('类名')----有就删除，没有就添加
      
• 操作样式
  
  • 获取
    
    • jq对象.css('样式名')
      
  • 设置
    
    • jq对象.css('属性名'，'属性值')
      
  • jq对象.css({
    
  •         'key':'value',
    
  •         'key1':'value1',
    
  •          ......
    
  • })
    
• 操作属性
  
  • 自定义属性
    
    • jq对象.attr（'属性名'）
      
    • jq对象.attr（'属性名'，'属性值'）
      
    • jq对象.attr（{
      
    •         'key':'value',
      
    •         'key1':'value1',
      
    •          ......
      
    • }）
      
  • 标准属性
    
    • jq对象.prop（'属性名'）
      
    • jq对象.prop（'属性名' , '属性值'）
      
    • jq对象.prop（{
      
    •         'key':'value',
      
    •         'key1':'value1',
      
    •          ......
      
    • }）
      
• 操作文本
  
  • 操作纯文本   text（）==    textContent
    
  • 解析标签    html（）==    innerHTML
    
  • 表单标签      val（）==    value
    
• 入口函数
  
  • $(function( ){
    
  •         js代码
    
  • })
    
  • 
    
  • $(document).ready(function( ){
    
  •         js代码
    
  • })