JavaScript html css web常用知识，JavaScript取整数的方法， javascript 常用尺寸属性，JavaScript 处理获取屏幕可视区域宽高度兼容性问题，Javascript节点选择，javaScript 操作节点(Element)、设置css样式， html 接收GET请求参数

html 接收GET请求参数

 
   function GetQueryString(name)
   {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
 
   }
 
 alert(GetQueryString("参数名"));

javascript获取节点的文本值

我们知道通过浏览器自带的innerHTML属性能够获取节点的所包含的字符串的值，比如有如下节点：
< div id ="test" >< strong > i'm strong </ strong ></ div >
通过 
var obj = document.getElementById( " test " );
alert(obj.innerHTML); // 返回的值是<strong>i'm strong</strong>
如果我想得到节点的文本值，也就不包括标签以为的字符串，怎么办呢。这里的文本值是:i'm strong

完整代码如下：

< html >
< head >
< title > title </ title >
</ head >
< body >

< div id ="test" >< strong > i'm strong </ strong ></ div >
< script type ="text/javascript" >
var obj = document.getElementById( " test " );

// 兼容浏览器获取节点文本的方法
function text(e)
{
var t = "" ;

// 如果传入的是元素，则继续遍历其子元素
// 否则假定它是一个数组
e = e.childNodes || e;

// 遍历所有子节点
for ( var j = 0 ;j < e.length;j ++ ){
// 如果不是元素，追加其文本值
// 否则，递归遍历所有元素的子节点
t += e[j].nodeType != 1 ?
e[j].nodeValue:text(e[j].childNodes);
}
// 返回区配的文本
return t;
}
alert(text(obj))
</ script >
</ body >
</ html >

JavaScript取整数的方法

JavaScript取整数的方法
1、舍弃小数部分，保留整数部分：parseInt（）

示例：
//取整
function getResult(5 / 2)
return parseInt(5 / 2);

2、向上取整，有小数就整数部分加1：Math.ceil（）

示例：
// 向上取整
var ceil = Math.ceil(5 / 2)
console.log('++++++++++', ceil) // 3

3、四舍五入：Math.round（）

示例：
// 四舍五入
var round1 = Math.round(5 / 2),
round2 = Math.round(10 / 3)
console.log('**********', round1) // 3
console.log('**********', round2) // 3

4、向下取整：Math.floor（）

示例：
// 向下取整
var floor = Math.floor(5 / 2)
console.log('----------', floor) // 2
————————————————
版权声明：本文为CSDN博主「wucms」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wucms/article/details/107708308

Javascript节点选择

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")
————————————————
版权声明：本文为CSDN博主「敲代码挣彩礼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37625156/article/details/88408286

JavaScript父节点、子节点和兄弟节点

之前获取元素的方法像
document.getElementById
document.getElementsByTagName
document.querySelector

节点操作之父节点 node.parentNode。得到的是离元素最近的父亲。如果找不到，则返回null。
   <script>
        //根据上面，class为box是class为x的父亲，如果想要获取box，则可以使用以下操作。
        var x = document.querySelector('.x')
        console.log(x.parentNode);
    </script>

节点操作之子节点 node.childNodes
所有的子节点，包括元素节点、文本节点(包括空格)等。
    <script>
        //如果想要进获取ul里面的li
        var ul = document.querySelector('ul')
        console.log(ul.childNodes);
        //如果想要获得里面的元素节点，需要专门处理，一般不提倡。
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                console.log(ul.childNodes[i]);
            }

        }
    </script>

parentNode.children
由于上述方法得到了所有的节点，不推荐使用。建议parentNode.children。得到了各个浏览器的支持。
   //方法二 是实际常用的
   console.log(ul.children);

parentNode.firstChild和parentNode.lastChild
分别获取第一个节点和最后一个节点。不管是不是元素节点。注意这两个方法有兼容性问题，只有IE9以上才支持。
实际中常用ul.children[0] 和ul.children[ul.children.length - 1]

<script>
        var ul = document.querySelector('ul')
        console.log(ul.firstChild);
        console.log(ul.lastChild);
 </script>

parentNode.firstElementChild

第一个元素节点
    <script>
        var ul = document.querySelector('ul')
     
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
    </script>

节点操作之兄弟节点
node.nextSibling得到了下一个兄弟节点，包括元素节点和文本节点（换行）等。
node.previousSibling得到当前元素上一个兄弟节点
    <script>
        var div = document.querySelector('div')
        console.log(div.nextSibling);
        console.log(div.previousSibling);
    </script>

node.nextElementSibling得到下一个兄弟元素节点
    <script>
        var div = document.querySelector('div')
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

//获取所有兄弟节点
function getSiblings(elem) {
    var r = [];
    var n = elem.parentNode.firstChild;
    for(; n; n = n.nextSibling) {
        if(n.nodeType === 1 && n !== elem) {
            r.push(n);
        }
    }
    return r;
}

————————————————
版权声明：本文为CSDN博主「grt要一直一直努力呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44870115/article/details/119517980

javaScript 操作节点(Element)、设置css样式

作节点(Element)：
firstElementChild跟firstChild的区别在于， 有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本节点之类的。而firstChild是所有都选择所有节点，包括文本。IE8以上的不支持元素选择器。
下面是节点的类型↓
元素节点-1   属性节点-2  文本节点-3  注释节点-8  document-9   DocumentFragment-11
这个可以通过节点类型(nodeType)来获取，后期一般用这个来判断该对象是什么类型

节点的常用四个属性：
nodeName  → 元素的标签名，以大写形式表示，只读。
nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

入股节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

nodeValue  → 获取Text节点或Comment节点的文本内容，可读写
nodeType  该节点的类型，只读。返回的会根据不同类型返回不同的数值（数值在上面有写）

设置CSS样式：
当我们获取到当前标签或对象时， 可以通过.style后再点出其需要设置的样式，如
div. style. backgroundColor="#fff000"  
上面这个代表着 直接在页面内设置样式
还可以 通过更改其所属的class来更改其样式(等于直接换了一个css的类选择器一样)
div .className="类选择器的名称";

获取CSS样式：
var catchCSS= div.style.backgroundColor；    ←这代表获取当前div的背景颜色，注意：这 只能获取到内联样式的，外部样式无法获取。
若是出现IE8以前的版本上面的获取方法会有 兼容性问题。所以可以采用下面的方法进行获取
var catchCSS=div. currentStyle.backgroudColor;  

CSS样式中的 display除了可以改变元素为行内元素或者块元素以外，还能将该 对象隐藏(none)

Java 运算符

自增自减运算符
1、自增（++）自减（--）运算符是一种特殊的算术运算符，在算术运算符中需要两个操作数来进行运算，而自增自减运算符是一个操作数。

public class selfAddMinus{
    public static void main(String[] args){
        int a = 3;//定义一个变量；
        int b = ++a;//自增运算
        int c = 3;
        int d = --c;//自减运算
        System.out.println("进行自增运算后的值等于"+b);
        System.out.println("进行自减运算后的值等于"+d);
    }
}

运行结果为：
进行自增运算后的值等于4
进行自减运算后的值等于2

解析：
int b = ++a; 拆分运算过程为: a=a+1=4; b=a=4, 最后结果为b=4,a=4
int d = --c; 拆分运算过程为: c=c-1=2; d=c=2, 最后结果为d=2,c=2
2、前缀自增自减法(++a,--a): 先进行自增或者自减运算，再进行表达式运算。
3、后缀自增自减法(a++,a--): 先进行表达式运算，再进行自增或者自减运算 实例：

public class selfAddMinus{
    public static void main(String[] args){
        int a = 5;//定义一个变量；
        int b = 5;
        int x = 2*++a;
        int y = 2*b++;
        System.out.println("自增运算符前缀运算后a="+a+",x="+x);
        System.out.println("自增运算符后缀运算后b="+b+",y="+y);
    }
}

自增运算符前缀运算后a=6，x=12
自增运算符后缀运算后b=6，y=10

javascript 常用尺寸属性

javascript的一些位置尺寸属性
一、尺寸
window.innerWidth 窗口的可视区域（包括滚动条的宽度）
window.innerHeight 窗口的可视区域（包括滚动条的高度）
window.outerWidth 浏览器界面宽度（win10有隐藏边框，微信截图可以看出）
window.outerHeight 浏览器界面高度
window.screen.width 设备屏幕的宽度
window.screen.height 设备屏幕的高度
window.screem.availWidth 设备屏幕排除状态栏的宽度
window.screem.availHeight 设备屏幕排除状态栏的高度

domEle.clientWidth 文档节点的可视区域宽度（包括盒内容和内边距，排除边框）
domEle.clientHeight 文档节点的可视区域高度（包括盒内容和内边距，排除边框）
domEle.offsetWidth 文档节点的可视区域宽度（包括盒内容、内边距和边框）
domEle.offsetHeight 文档节点的可视区域高度（包括盒内容、内边距和边框）
domEle.scrollWidth 文档节点的实际宽度（包括盒内容和内边距，排除边框）
domEle.scrollHeight 文档节点的实际高度（包括盒内容和内边距，排除边框）

二、位置
元素位置
边框盒子：包括边框到内容的盒子
内边距盒子：包括内边距到内容的盒子
内容盒子：包括内容的盒子
相对父节点：父级以上有position: absolute | realtive | fixed | sticky属性的节点
offsetParent 文档节点的相对父节点，没有则是body
domEle.offsetLeft 文档节点边框盒子左侧距离相对父节点（没有相对父节点则是html节点）边框盒子左侧的距离
domEle.offsetTop 文档节点边框盒子上侧距离相对父节点（没有相对父节点则是html节点）边框盒子上侧的距离
domEle.clientLeft 文档节点左边框的厚度
domEle.clientTop 文档节点上边框的厚度
domEle.scrollTop 文档节点被卷走的高度
domEle.scrollLeft 文档节点被卷走的宽度

事件位置
event.clientX 触发点距离浏览器可视区域左侧的距离
event.clientY 触发点距离浏览器可视区域上侧的距离
event.offsetX 触发点距离事件节点内边距盒子的左侧距离
event.offsetY 触发点距离事件节点内边距盒子的上侧距离
event.layerX 触发点距离事件节点边框盒子的左侧距离
event.layerY 触发点距离事件节点边框盒子的上侧距离
event.x 同event.clientX
event.y 同event.clientY
event.pageX 触发点距离页面左侧的距离
event.pageY 触发点距离页面上侧的距离
event.screenX 触发点距离设备屏幕左侧的距离
event.screenY 触发点距离设备屏幕上侧的距离
————————————————
版权声明：本文为CSDN博主「偷笑ing」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38557202/article/details/102773802

javascript client属性
元素可见的高度: document.body.clientHeight
元素可见的宽度: document.body.clientWidth
了解: clientTop 和 clientLeft
javascript Offset属性
元素可见的高度(包括边框内边距): offsetHeight
元素可见的宽度(包括边框内边距): offsetWidth
offsetWidth 和 style.width (高度同理)的区别:

offsetWidth 会获取: 元素本身的高度 + padding + border

style.width会获取: 元素本身的高度 并且 style.width 只能获取行内样式

offsetWidth 返回 数字 style.width 返回 带单位的字符串

元素离父标签的顶部距离(带有定位的): offsetTop
元素离父标签的左边距离(带有定位的 ): offsetLeft
元素父标签(有定位的): offsetParent
offsetParent和parentNode的区别:

offsetParent会找到有定位的父标签(就近原则), parentNode只能做到本元素的父标签


javascript scroll属性和方法
网页正文的高度: document.body.srcollHeight

网页正文的宽度: document.body.srcollWidth

网页滚动的高(最最常用): srcollTop

网页滚动的宽(左): srcollLeft

方法: 滚动到指定的位置: scrollTo(x,y)

注: 只有在窗口 或 文档的时候才能获取 scroll属性的值
————————————————
版权声明：本文为CSDN博主「liaohui5」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38358436/article/details/88096765

JavaScript 处理获取屏幕可视区域宽高度兼容性问题

/**
  * 获取屏幕的宽度和高度
  * client().width
  * client().height
  * @returns {{width: number, height: number}}
  */
function client() {
    if (window.innerWidth) { // IE9及以上版本浏览器
        return {
            width  : window.innerWidth,
            height : window.innerHeight
        };
    }else if (document.compatModel === 'CSS1Compat') {
        // CSS1Compat w3c标准
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
    return {
        width : document.documentElement.clientWidth,
        height : document.documentElement.clientHeight
    };
}