CSS和JS基础学习_cshljs-优快云博客

本文链接：https://blog.youkuaiyun.com/Mona_lxh/article/details/126139366

本文深入探讨了CSS的角色，包括基础语法、盒子模型和定位技术，阐述了如何实现页面的美观展示。同时，介绍了JavaScript的基本概念、弱类型特性、函数以及DOM操作，特别是针对表格的事件处理，如onmouseover和onmouseout。文中还讨论了onblur与blur的区别，并解释了在实际应用中的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS
1）CSS的角色：页面显示的美观风格。
2）CSS的基础语法：标签样式；类样式；ID样式；组合样式；嵌入式样式表；内部样式表；外部样式表。
3）盒子模型：border、margin、padding。
4）定位和浮动：position、float、DIV+CSS布局。

2.JS
1）JS是客户端（浏览器端）运行的脚本语言，语法风格和java比较类似。
2）JS是弱类型的语言 var str = 99 ;
3）JS的函数 function hello(var num){}
4）DOM技术：
   4-1）鼠标悬浮：onmouseover,event.srcElement,事件传递，parentElement,style.backgroundColor
   鼠标离开：onmouseout
   4-2）鼠标点击：hand/pointer,onclick,td.innerText,td.innerHTML="<input type='text'/>"
           td,firstChild.value=oldPrice
   失去焦点：onblur,input.parentElement.innerText = newPrice;
   更新小计：input = event.srcElement，tr = input.parentElement.parentElement；tr.cells，parseInt
   更新总计：document.getElementById("fruit_tbl")，fruitTbl.rows
   4-3）删除一行：img,img.parentElement.parentElement.rowIndex.

οnmοuseοver=:当鼠标悬浮在上面时
οnmοuseοut=:当鼠标离开上面时
表格行索引rowIndex，表格列索引：cellIndex

在JS学习中遇到的疑惑。

在JS里面有括号表示当场调用方法，把返回值赋给对象。没有括号表示绑定上该事件并不是执行。
我猜可能只有细微的差别，因为老师说js是很灵活的，写上括号也没有错误。

firstChild：firstChild是元素的所有子节点（childNodes）中的第一个子节点，如果元素的第一个子节点没有变化，
则firstChild这个引用也不会有变化。连续获取两次firstChild是同一个对象。

onblur和blur是啥，性质有什么区别，在使用上有什么区别。
onblur 是原生 js 的写法，可以直接写在元素的属性中或者在脚本中定义（onblur只是一个名字）；
blur()是jQuery 的方法，直接绑定对象；
$(selector).blur()

img.parentElement.parentElement是tr。
那么img.parentElement.parentElement.rowIndex代表tr那一行的表格行索引。