菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 20221118-张锐杰-jQuery01 [打印本页]

作者: 张锐杰 时间: 2022-11-18 14:10
标题: 20221118-张锐杰-jQuery01

今日所学内容：
# jQuery-day01

## 1.什么是jQuery？

jQuery是一个快速的、小巧的、功能丰富的js库
jQuery文件暴露了一个对象给window----$
学习jQuery就是学习里面的属性和方法

## 1.1特点：

      1.独特的选择器
      2.链式的DOM操作
      3.事件绑定机制
      4.出色的浏览器兼容性
      5.封装完善的ajax请求

## 2.jQuery的选择器【重点】

匹配模式，匹配规则

语法：
      $('选择器') jQuery('选择器')
      $===jQuery


      1.基本选择器
            id选择器===$('#id')
            class选择器===$('.class')
            标签选择器===$('标签名')

      2.层级选择器
            子代选择器
            后代选择器
            兄弟选择器之下一个兄弟
            兄弟选择器之后的所有兄弟

      3.过滤选择器
            第一个
            最后一个
            第几个
            除自己之外的所有同级兄弟元素

## 3.jq对象与原生对象

$('选择器')
document.querySelector('选择器')

相互转换
jq对象转为原生对象：jq对象[0]  jq对象.get(0)

原生对象转jq对象：原生对象----$(原生对象)

jq对象只能使用jq的方法
原生对象只能使用原生的方法

$(this)---jq对象
this----原生对象

## 4.操作class

1.添加类名 jq对象.addClass("类名类名...")
2.删除类名 jq对象.removeClass()---删除所有
            jq对象.removeClass('类名')---删除指定类名
3.判断    jq对象.hasClass('类名')----判断是否含有---布尔值
4.切换    jq对象.toggleClass('类名')---有就删除，没有就添加

## 5.操作样式【重点】

1.获取
      jq对象.css('样式名')
2.设置
      jq对象.css('属性名','属性名')
      jq对象.css({
            'key':'value',
            'key1':'value1',
            .....
      })


## 6.操作属性

1.自定义属性
      jq对象.attr('属性名')
      jq对象.attr('属性名','值')
      jq对象.attr({
            'key':'value',
            'key1':'value1',
            .....
      })
2.标准属性
      jq对象.prop('属性名')
      jq对象.prop('属性名','值')
      jq对象.prop ({
            'key':'value',
            'key1':'value1',
            .....
      })

## 7.操作文本

1.操作纯文本 text()---textContent/innerText
2.解析标签 html()----innerHTML
3.表单标签 val()----value

## 8.入口函数

1.$(function(){
      js代码
})
2.$(document).ready(function(){
      js代码
})

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)