整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

21-jquery-css样式操作的方法

lt;!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>21-jquery-css样式操作的方法</title>

<!-- <script src="../static/js/jquery-3.6.0.js"></script>

<script>

$(function(){


})

</script> -->

<script src="../static/js/jquery-3.6.0.js"></script>

<script>

$(function(){


// 1. 逐个设置，一次只设置一个

// $("div").css("height", '100px'); // 设置div的高度为100

// $("div").css("width", "100px"); // 设置div的宽度为100

// $("div").css("background", "red"); // 设置div的背景为红色


// 2. 链式设置

// 注意：链式操作如果大于3布建议分开， 因为可读性就变差了

// $("div").css("height", '200px').css("width", "150px").css("background", "blue"); // 把div设置成高200，宽150，蓝色背景



// 3.批量设置

$("div").css({

width: '300px',

height: '250px',

background: 'pink',

});




// 4.获取css样式值

let h = $("div").css("height") // 获取div的高度并赋值给h

$("div").text(h) // 把h的值写到div当中

})

</script>

</head>

<body>

<div></div>

</body>

</html>

近项目需求，写了一个类似百度搜索框的功能。

把代码整理了一遍，然后分享出来给大家看看，如果有不对的地方请多指教。

实现效果

使用的语言：html，css,JavaScript,jQuery

代码部分

html部分：


  2. <div style="color: #323232; ">
  3. 查找：
  4. <input id="input"/>
  5. <button>搜索</button>
  6. <!--输入框下方的列表-->
  7. <ul id="ul" style="display:none;z-index: 2;">
  8. <li>1</li>
  9. <li>2</li>
  10. <li>3</li>
  11. </ul>
  12. <!--输入框内的箭头-->
  13. <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
  14. </div>

js部分：


  2. $(document).ready(function(){
  3. //先监听input的值变化
  4. document.getElementById("input").oninput=function(){
  5. var val = $(this).val()
  6. if(val!=""){
  7. //当input中有值 的时候显示ul列表
  8. $("#ul").css("display","block")
  9. var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
  10. //开始监听键盘事件
  11. document.onkeydown = function (e) {
  12. e = e || window.event;
  13. var code = e.keyCode //用来储存 e.keycode
  14. if(code==40){
  15. console.log("下")
  17. //获取ul中的li个数，使选择不会超出
  18. if(a<$("#ul").children("li").length){
  19. a++;
  20. //开始获取到选择中的li标签
  21. $("#ul").children("li").eq(a)
  22. }
  23. }else if(code==38){
  24. console.log("上")
  26. //获取ul中的li个数，使选择不会超出
  27. if(0<a){
  28. a--;//开始获取到选择中的li标签
  29. $("#ul").children("li").eq(a)
  30. }
  31. }else if(code==13){
  32. console.log("回车")
  33. }
  34. }
  35. }else{
  36. //当input中没有值的时候隐藏ul列表
  37. $("#ul").css("display","none")
  38. }
  39. }
  40. //给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
  41. $("body").click(function(){
  42. $("#ul").css("display","none")
  43. })
  45. //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
  46. $("#input").blur(function(){
  47. document.onkeydown =null
  48. })
  49. })

全部代码：


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>jQuery实现百度搜索输入框</title>
  7. </head>
  8. <body>
  9. <!--
  10. 作者：380012546@qq.com
  11. 时间：2018-08-02
  12. 描述：实现百度搜索输入框的功能
  13. -->
  14. <div style="color: #323232; ">
  15. 查找：
  16. <input id="input"/>
  17. <button>搜索</button>
  18. <!--输入框下方的列表-->
  19. <ul id="ul" style="display:none;z-index: 2;">
  20. <li>1</li>
  21. <li>2</li>
  22. <li>3</li>
  23. </ul>
  24. <!--输入框内的箭头-->
  25. <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
  26. </div>
  29. </body>
  30. <!--引入jQuery方便遍历-->
  31. <script src="js/jquery-3.3.1.js"></script>
  32. <!--开始js-->
  33. <script>
  35. $(document).ready(function(){
  36. //先监听input的值变化
  37. document.getElementById("input").oninput=function(){
  38. var val = $(this).val()
  39. if(val!=""){
  40. //当input中有值 的时候显示ul列表
  41. $("#ul").css("display","block")
  42. var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
  43. //开始监听键盘事件
  44. document.onkeydown = function (e) {
  45. e = e || window.event;
  46. var code = e.keyCode //用来储存 e.keycode
  47. if(code==40){
  48. console.log("下")
  50. //获取ul中的li个数，使选择不会超出
  51. if(a<$("#ul").children("li").length){
  52. a++;
  53. //开始获取到选择中的li标签
  54. $("#ul").children("li").eq(a)
  55. }
  56. }else if(code==38){
  57. console.log("上")
  59. //获取ul中的li个数，使选择不会超出
  60. if(0<a){
  61. a--;//开始获取到选择中的li标签
  62. $("#ul").children("li").eq(a)
  63. }
  64. }else if(code==13){
  65. console.log("回车")
  66. }
  67. }
  68. }else{
  69. //当input中没有值的时候隐藏ul列表
  70. $("#ul").css("display","none")
  71. }
  72. }
  73. //给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
  74. $("body").click(function(){
  75. $("#ul").css("display","none")
  76. })
  78. //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
  79. $("#input").blur(function(){
  80. document.onkeydown =null
  81. })
  82. })
  84. </script>
  85. </html>

果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。

1.Document与Element和TEXT是Node的子类。

Document:树形的根部节点

Element：HTML元素的节点

TEXT：文本节点

>>HtmlElement与HtmlDocument

a:HtmlElement对象表示HTML中的一个个元素。

b:HtmlDocument对象表示 HTML 文档树的根。HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

>>HTML的DOM对象

a:DOM Event:Event 对象代表事件的状态。

b:DOM Attribute：Attr 对象表示 HTML 属性。

c:DOM Element：Element 对象表示 HTML 元素，Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

d:DOM Document：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

#log span 与 #log>span的区别？

<div id="log">
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
<div>
<span>Span4</span>
<span>Span5</span>
</div>
</div>

#log span的效果：

#log>span的效果：

2.CSS选择器

与CSS选择器的标准化一起的另外一个称做"选择器API"的W3C标准定义了获取匹配一个给定选择器的元素的JavaScript方法。该API的关键是Document方法querySelectorAll()。它接收包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。

querySelectorAll()返回的NodeList对象并不是实时的：它包含在调用时刻选择器所匹配的元素，不包括后续的通过JavaScript更改文档的匹配元素。

querySelectorAll()强大到即使在没有其的原生支持的浏览器中依旧可以使用CSS选择器。它是一种终极的选取方法技术。

基于jQuery的Web应用程序使用一个轻便的，跨浏览器的和querySelectorAll()等效的方法，命名为$().

jQuery的CSS选择器匹配代码已经作为一个独立的标准库提出来并发布了，命名为Sizzle。

3.HTML属性作为Element的属性

表示HTML文档元素的HTMLElement对象定义了读写属性，他们映射了元素的HTML属性。

例如：

var image=document.getElementById("my_image");

var imgurl=image.src;

可以使用<img>元素的HTMLElement对象的src属性.

4.数据集属性

有时候在HTML元素上绑定一些额外的信息。HTML5提供看一种方法。

任意一”data-*“为前缀的小写的属性名字都是合法的。

5.Web浏览器很擅长解析HTML，通常设置innerHTML效率非常高。但是：对innerHTML属性使用”+=“操作符重复追加文本时效率低下，因为它既要序列化又要解析。

插入节点方法：appendChild()与insertBefore()的异同？

6.视口坐标与文档坐标

视口坐标:指的是显式文档内容的那一部分(也即我们在浏览器中能看到的那部分区域)，不包括浏览器的外壳元素，比如菜单栏，工具条等。

文档坐标:指的是包含整个页面的整个部分(也即我们在浏览器中能看的那部分区域以及需要依靠滚动条来滚动查看的区域)。

该书中提供了几个实用的方法：

a:查询窗口滚动条的位置

//查询窗口滚动条的位置

functon getScrollOffsets(w){

w = w || window;

var sLeft,sTop;

if(w.pageXOffset != null) {

sLeft = w.pageXOffset;

sTop = w.pageYOffset;

return {x:sLeft,y:sTop};

}

b:查询窗口的视口尺寸

//查询窗口的视口尺寸

function getViewportSize(w){

w = w || window;

var cWidth,cHeight;

if(w.innerWidth != null){

cWidth = w.innerWidht;

cHeight = w.innerHeight;

return {w:cWidth,h:w.cHeight};

}

if(document.compatMode == "CSS1Compat"){

cWidth = document.documentElement.clientWidth;

cHeight = doument.documentElement.clientHeight;

return {w:cWidth,h:w.cHeight};

}else if(document.compatMode == "BackCompat"){

cWidth = document.body.clientWidth;

cHeight = doument.body.clientHeight;

return {w:cWidth,h:w.cHeight};

}

}

7.查询元素的几何尺寸

getBoundingClientRect()方法

具体见乱炖中的这篇文章：使用getBoundingClientRect()来获取页面元素的位置

需要注意的是：getBoundingClientRect这个方法不同于getElementByTagName()这样的DOM方法返回的结果是实时的，但是getBoundingClientRect却不是，它类似于一种静态快照。用户滚动的时候，并不会去实时更新。

getBoundingClientRect()与getClientRects()的区别？

8.判断元素在某点

elementFromPoint()能够用来判断判定视口中的指定位置上有什么元素。

传递X与Ｙ坐标（使用视口或窗口坐标而不是文档坐标）

它有一个取代者，那就是target属性。

9.滚动

Window的scrollBy()与scroll()和scrollTo()类似。

只是scrollBy的参数是相对的，并在当前滚动条的偏移量上增加。

如：

scrollIntoView()的使用？

offsetWidth()

offsetHeight()

offsetLeft()

offsetTop()

offsetParent()

clientWidth()

clientHeight()

clientLeft()

clientTop()

scrollWidth()

scrollHeight()

scrollLeft()

scrollTop()

Client他就是Web浏览器客户端-专指它定义的窗口或视口。

10.HTML表单

服务器端程序是基于表单提交动作的

客户端程序是基于事件的

JavaScript的From。

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang


在线咨询
上一篇：11款流行的HTML5网站模板（完全免费，内附下载地址）
下一篇：中心医院三级公立绩效指标及医疗质控平台

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 曲阜 江岸区 怀化 渭南 彭州市 千阳县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服