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

标题: 王文博--20221226-jq-day01 [打印本页]

作者: 博5237 时间: 2023-1-5 18:23
标题: 王文博--20221226-jq-day01
一、今日学习内容
html节点，css，事件函数，js特效与动画
使用：js函数库
引入：引入本地，在线cdn地址
标签：script--src
版本：
未压缩
压缩版
入口函数
概念：一旦dom结构渲染完毕就可以执行内部代码---window.onload
$(function(){js代码})
$(document).ready(function(){js代码})
等待dom结构加载完毕之后在执行里面function内部的js代码
核心对象：$ jQuery
获取节点
$('选择器')
返回值：event.fn.init
length
索引
jq对象与原生对象相互转换
jq对象转原生对象
jq对象[索引]
原生对象转jq对象
$(原生对象)
选择器
1.基础选择器
id选择器
class选择器
标签选择器
*选择器
2.层次选择器
后代选择器---空格
子代选择器---大于
相邻选择器：prev+next $('#box+ul')
同辈选择器：prev~sibling $('#box~div')
3.表单选择器
$(':input')
input/select/textarea/button
input标签的type属性的选择器
:text
:password
操作类名
addClass---添加
removeClass---删除
toggleClass---切换--没有就添加，有就移除
筛选
first：集合中的第一个元素
last：集合中的最后一个元素
eq：集合中的某具体的一个元素
eq:length-1获取集合中的最后一个元素
下一个next()
上一个prev()
nextAll();后面的所有兄弟节点
传参与不传参
传参：选择器
不传参：默认选择所有
nextUntil():筛选出元素后面所有的兄弟节点，直到选择器元素为止
parent():所有父级元素
parents():所有祖先元素
parentUntil(选择器)：不包含参数的这个选择器对应的元素
children(选择器)：筛选出所有符合条件的子元素
find(选择器):后代元素
siblings()：所有的兄弟节点---选择器
不包含自己
index()---索引：从0开始
隔行变色
第一种
for (let i = 0; i < p.length; i++) {
   if (i % 2 == 0) {
         //索引为奇数
         //索引为0--第一行
            $(p[i]).css('color', 'aqua');
      } else {
            $(p[i]).css('color', 'gold');
      }
   }
第二种
$('p

dd').css('color', 'blue')
$('p:even').css('color', 'pink')
二、今日问题
无

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