jQ属性应用导航菜单制作 jq获取滚动条 scrollLeft获取滚动条的距离 scroll监听滚动条事件 offset

导航菜单制作

<style>
ul{
 display: flex;
 list-style: none;
 }
ul li{
 background: #f2f2f2;
 width: 130px;
 line-height: 40px;
 text-align: center;
 border-right: 1px solid red;
 }
 ul li:last-child{
  border-right: 0;
  }
  </style>
  <body>
  <ul>
  <li>新闻</li>
  <li>体育</li>
  <li>娱乐</li>
  <li>篮球</li>
  <li>足球</li>
  </ul>
  <script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>
  <script>
  $('li').hover(function(){
 $(this).css('background','#ccc').siblings().css('background','')
 })
 </script>
 </body>

jq获取滚动条

scrollLeft获取滚动条的距离
scroll监听滚动条事件
offsetParent 返回最近的已定位祖先元素
width height获取的只是content里面的距离
不包括padding margin border
返回以像素为单位的top和left坐标。仅对可见元素有效
★top 和 left值会包括自己的margin值和父元素的border值

鼠标事件

hover 由mouseenter和mouseleave组成
mouseenter mouseleave ★在进入子元素区域的时候不会触发
mouseover和 mouseout 在进入子元素区域的时候也会触发

链式调用

end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

鼠标点击事件

keydown按下键盘时
keyup释放按键时
keypress产生可打印的字符时连续敲击键盘的时候触发
keyCode敲击回车的时候触发