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

标题: 谷江涛-20221117-jquery01 [打印本页]

作者: 暴风雨 时间: 2022-11-21 22:31
标题: 谷江涛-20221117-jquery01
一、今日学习
1.什么是jQuery？
jQuery是一个快速的，小巧的，功能丰富的js库
jQuery文件中暴露了一个对象给window---$
2.特点
独特的选择器
链式的DOM操作
事件绑定机制
出色的浏览器兼容性
封装完善的Ajax请求
3.jQuery的选择器
匹配模式、匹配规则
作用：查找元素
语法：
$('选择器') jQuery('选择器')
$===jQuery
基本选择器
id选择器=== $('#id')
class选择器===$('.class')
标签选择器===$('标签名')
层级选择器
子代选择器
后代选择器
兄弟选择器值得下一个兄弟
兄弟选择器值后面的所有兄弟
过滤选择器
第一个
最后一个
第几个
除自己之外的所有同级兄弟元素
4.jQuery对象与原生对象
$('选择器')
duncument.querySelector('选择器')
相互转换：
jq对象转为原生对象：jq对象[0] jq对象.get(0)
原生对象转jq对象：原生对象---$(原生对象)
jq对象只能使用jq的方法
原生对象只能使用原生的方法
$(this)---jq对象
this---原生对象
5.操作class
添加类名  jq对象.addClass('类名类名 ..')
删除类名  jq对象.removeClass()---删除所有
jq对象.removeClass('类名')---删除指定类名
判断       jq对象.hasClass('类名')---判断是否含有---布尔值
切换       jq对象.toggleClass('类名')---有就删除，没有就添加
操作样式：
获取：
jq对象.css('样式名')
设置：
jq对象.css('属性名','属性值')
jq对象.css({
'key':'value',
'key1':'value',
.....
})
6.操作属性
自定义属性：
jq对象.attr('属性名')
jq对象.attr('属性名','属性值')
jq对象.attr({
'key':'value',
'KEY1':'value',
...
})
标准属性：
jq对象.prop('属性名')
jq对象.prop('属性名','属性值')
jq对象.prop({
'key':'value',
'KEY1':'value',
...
})
7.操作文本
操作纯文本 text()---textContent/innerText
解析标签  html()---innerHTML
表单标签  val()---value
入口函数
$(function(){
js代码
})
$(document).ready(function(){
js代码
})
如果是在头部进行外部引入js，需在js文件内声明入口函数，否则无法操作dom

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