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

标题: 蒋鹏冲-20221117-jQuery-01 [打印本页]

作者: 北纬33 时间: 2022-11-17 23:47
标题: 蒋鹏冲-20221117-jQuery-01
一，今日学习内容：
1.jQuery-day01
1.什么是jQuery？
jQuery是一个快速的，小巧的，功能丰富的js库

jQuery文件中暴露了一个对象给window----$

学习jQuery就是学习里面的属性和方法
1.1 特点：
独特的选择器
链式的DOM操作
事件绑定机制
出色的浏览器兼容性
封装完善的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/)