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

标题: 李扬敏-20221117-jQuery [打印本页]

作者: 王源的李可爱 时间: 2022-11-17 23:35
标题: 李扬敏-20221117-jQuery

一．今日学习内容

1.jQuery概念

jQuery是一个快速地小巧的功能丰富的js库

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

2.特点

独特的选择器

链式的DOM操作

时间绑定机制

出色的浏览器兼容性

封装完善的ajax请求

3.选择器

匹配的模式，规则

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

2）基本选择器

id选择器----$('#id')

class选择器----$('.class')

标签选择器----$('标签名')

3）层级选择器

子代选择器：$('父级选择器>子选择器')--所有的子选择器这一类

后代选择器：$('父级后代')--所有的后代

兄弟选择器--相邻的下一个兄弟：$('兄弟+下一个兄弟')

兄弟选择器--后面所有的兄弟：$('兄弟~后面所有兄弟')

4）过滤选择器

$('div p:first')---div下第一个p

$('div p:last')---div下最后一个p

$('ul li').eq(0)--ul下索引为0的li

$('.two').siblings()--除了自己之外的兄弟元素

5）拓展选择器

$(':input')：查找所有input元素（input,select,button,textarea）---表单元素

$(':text')[0].type：text为input的type属性值，返回type值

4.jq对象与原生对象

5.操作class

添加类名：jq对象.addClass('类名类名 ...')

删除类名：jq对象.removeClass(‘类名’)----删指定（不传参删除所有）

判断：jq对象.hasClass('类名')---判断是否含有--布尔

切换：jq对象.tooggleClass('类名')---有就删除，没有就添加

6.操作样式

获取：jq对象.css('样式名')

设置：jq对象.css('属性'，‘属性值’)

jq对象.css（{‘key’：‘value’，‘key1’：‘value1’}）

7.操作属性

1）自定义属性

一个：jq对象.attr('属性名'，‘值’）

多个：jq对象.attr({'属性名'：‘值’，}）

2）标准

修改添加属性：jq对象.prop('属性名'，‘值’）

多个属性：jq对象.prop({'属性名'：‘值’，}）

8.操作文本

纯文本--text()---textContent/innerHTML

解析标签--html()

表单标签---val()

9.入口函数

$(function(){js代码})

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

10.jq遍历

jq对象.each(function(index){})----index是索引值

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