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

标题: 王文博--20221117--jQuery-day01 [打印本页]

作者: 博5237 时间: 2022-11-17 23:30
标题: 王文博--20221117--jQuery-day01
一、今日学习内容
什么是jQuery
jQuery是一个快速的，小巧的，功能丰富的js库
jQuery文件暴露了一个对象给window----$
特点：
1、独特的选择器
2、链式的DOM操作
3、事件绑定机制
4、出色的浏览器兼容性
5、封装完善的Ajax请求
jQuery的选择器
匹配的模式，匹配规则
语法：
$('选择器') jQuery('选择器')
$===jQuery
基本选择器
id选择器===$('#id')
class选择器===$('.class')
标签选择器===$('标签名')
层级选择器
子代选择器$('父选择器>子选择器‘）===$('ul>li').css('color', 'aqua');
后代选择器$('')=== $('ul li').css('color', 'blue');
兄弟选择器之下一个兄弟=== $('.q+li').css('color', 'red');
兄弟选择器值后面所有的兄弟=== $('.q~span').css('color', 'aqua');
过滤选择器
第一个===$('div p:first').css('color', 'aqua');
最后一个===$('div p:last').css('fontSize', '40px');
第几个===$('ul li').eq(2).css('color', 'aqua');
除自己之外的所有同级兄弟元素===$('.qwe').siblings().css('color', 'blue');

jQuery对象与原生对象
$('选择器')
document.querySelector('选择器')

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

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

jQuery对象只能使用jQuery的方法
原生对象指正使用原生的方法

$(this)---jQuery对象
this---原生对象
操作class
1、添加类名：jQuery对象..addClass('类名类名...')
2、删除类名：jQuery对象.removeClass()---删除所有
jQuery对象.removeClass('类名')---删除指定类名
3、判断：jQuery对象.hasClass('类名')----判断是否含有--布尔值
4、切换：jQuery对象.toggleClass('类名')---有就删除，没有就添加
操作样式
1、获取
jQuery对象.css('样式名')
2、设置
jQuery对象.css('属性名','属性值')
jQuery对象.css({
'key':'value',
'key1':'value',
...
})
操作属性
自定义属性
jQuery对象.attr('属性名')
jQuery对象.attr('属性名','值')
jQuery对象.attr({
'key':'value',
'key1':'value',
......
})
标准属性
jQuery对象.prop('属性名')
jQuery对象.prop('属性名'，'值')
jQuery对象.prop({
'key':'value',
'key1':'value',
......
})
操作文本
操作纯文本 text()----textContent/innertext
解析标签 html()---innerHTML
表单标签 val()--- value

入口函数
1、$(function(){
js代码
})
2、$(document).ready(function(){
js代码
})

二、今日问题
无

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