天天看点
返回

web开发之路——javascript、dom、jQuery（上）JavaScriptDomjQuery

JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、代码存放形式以及存放的位置

1、JavaScript代码存在形式

javascript是浏览器可以直接编译的语言，他可以实现网页的各种“动作”。

JavaScript的存在形式分为两种

第一种是直接写在中

第二种是通过文件导入

2、JavaScript代码存在位置

javascript可以写在head中，但是写在head中会，如果是通过文件的形式导入的，如果文件访问不到，页面会一直卡着等待导入，使页面加载不出来。

所以JavaScript通常都是写在body中的最下面

JavaScript声明变量

1、变量声明

name = “dingyi” —-> 全局变量

var age = 18 —–> 局部变量

2、注释

// —-> 单行注释

—–> 多行注释

3、语法格式

类似java的语法格式，每行还有分号，函数体要有{}

2、JavaScript数据类型

1、数字

var age = 18;

var age = Number(18);

Number(‘13’) 或 parseInt(‘123’) —-> 将字符转化为数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<script>
var age = ;
console.log(age, typeof age);
age = parseInt(age); //更改变量类型
//var age = Number(18);
console.log(age, typeof age); //用来调试用的，在“审查元素”的console中查看


var age2 = ;
console.log(parseInt(age));
console.log(parseFloat(age));

var a1 = , a2 = , a3 =;//一次定义多个变量
</script>
</body>
</html>

2、字符串

var name = ‘dingyi’;

var name = ‘dingyi ‘;

name.trim();—–>去除空格

name.trimLeft();

name.trimRight();

name.charAt(1); —->’i’

name.chartAt(0); —–> ‘d’ 索引取值

name.substring(1,2); —-> ‘i’ 取一段值

name.substring(1,3); —-> ‘in’

name.indexOf(‘i’); —-> 1 找到索引下标

name.length; —-> 获取字符串长度

3、布尔值

var status = true;

var status = false;

var status = Boolen(1==1)

4、数组和字典

var li = [11,22,33] —-> 创建数组

var li = Array(11,22,33) —-> 创建数组

添加：

li.push(88) —-> [11,22,33,88]

li.unshift(“oo”) —-> [“oo”, 11, 22, 33, 88]

li.splice(1,0,’dingyi’) —-> [“oo”, “dingyi”, 11, 22, 33, 88]

—-> 1代表位置，0是固定的，不是零的话数据不会插入,”dingyi”是元素

移除：

i = li.pop() —-> 移除最后一个值，并复制给i

j = li.shift() —-> 移除第一个元素，并赋值给j

li.splice(1,2) —-> 这里跟添加的splice名字一样，1代表索引位置，2代表移除多少个

切片：

li = [11, 22, 33, 44]

li.slice(0,2) —-> 切片 [11,22]

合并：

li = [11, 22, 33, 44]

n = [‘dingyi’]

m = li.concat(n)

m —> [11, 22, 33, 44, ‘dingyi’] 原来的li不变

翻转：

li.reverse() —> [44, 33, 22, 11] 翻转的是li本身

字符串化：

n = li.join(‘-‘) —-> “44-33-22-11”

长度：

li.length

字典：

aa = {‘dd’:11, ‘xx’:22}

s = JSON.stringify(aa) —> 把字典转化为字符串

m = JSON.parse(s) —> 把字符串转化成字典

undefined：

未定义类型

例如不给变量赋值：var name；

name就是undefined类型

null：

null是一个特殊值

null和 undefined的布尔值都是false

3、循环语句

1、JavaScript的两种for循环

li = [, , , ]
for(var i in li){
    console.log(i);
}
输出结果是：




返回的是索引
           
d = {'k1':, 'k2':}
for(var i in d){
    console.log(item);
}
返回的是 k1 k2
           
for(var i=;i<;i++){
    console.log(i);
}

//打印数组中所有的元素
for(var i=;i<li.length;i++){
    console.log(li[i]);
}

//遍历字典
d = {'k1':, 'k2':}
for(var i in d){
    console.log(d[i]);
}

2、while循环

while(true){
    continue;
    berak;
}

4、条件语句 

if(条件){
    语句;
}else if(条件){
    语句;
}else{
    语句;
}
           
switch(name){
    case :
        console.log('111111');
        break;
    case :
        console.log('222222');
    default:
        console.log('sss');
}

异常处理 

try{
    代码块;
}catch(错误){
    代码块;
}finally{
    最后执行的代码块;
}

5、函数

1、普通函数

function dy1(arg){
    console.log(arg);
    return 'dingyi'
}
res = dy1()
console.log(res)

2、匿名函数

var f = function(arg){
    console.log(arg);
};
f();

3、自执行函数

(function(形参){
    console.log();
})(参数);

6、面向对象 

function Foo(name, age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
var obj = new Foo('alex', );

console.log(obj.Name);
console.log(obj.Age);
var ert = obj.Func('sb');
console.log(ret);

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

dom是把整体HTML封装成了类，主要的操作有两步：

1、查找元素

2、修改元素

比如有一个网页，内容如下

<h1>index</h1>
<h1>index</h1>

可以通过dom修改HTML代码

tags = document.getElementsByTagName('h1') //获取了所有的h1标签
---> [<h1>index</h1>, <h1>index</h1>]
tags[].innerText = '123';
tags[].innerText = 'xxx';

网页就会变成：

<h1>123</h1>
<h1>xxx</h1>

1、选择器

找标签常用的有三种方式

1、是document.getElementsByTagName() —> 根据标签类型

2、是document.getElementByID() —-> 根据ID查找

3、是document.getElementsByClassName() —> 根据样式名查找

还有一种：

document.getElementsByName() —> 根据标签的Name属性，主要针对input

—> 这个获取的是一个列表，就算只有一个name

2、创建标签 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
</head>
<div>
        <div id="n1">c1</div>
        <a>asdasdasd</a>
</div>
<ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
</ul>

<div>
        <div class="c1">1</div>
        <div class="c1">2</div>
        <div class="c1">3</div>
</div>

<form>
        <p>用户名:<input name="username" value="123"></p>
        <p>密码：<input name="pwd" value="456"></p>
</form>

<script type="text/javascript">
        var nid = document.getElementById('n1'); //根据ID查找标签
        nid.innerText = "dingyi"; //可以通过innerText属性来修改标签的值

        var lis = document.getElementsByTagName('li'); //通过标签自己的名字来寻找所有的这种标签，返回的是一个数组
        for(var i in lis){
                var item = lis[i];
                item.innerText = i;
        }

        var lis2 = document.getElementsByClassName('c1'); //通过css的样式名来寻找标签，返回的也是一个数组
        for(var i in lis2){
                var item = lis2[i];
                item.innerText = i;
        }

        var username = document.getElementsByName('username')[]; //通过标签的name属性来查找标签，返回的也是一个数组，只有一个name的时候，通过索引来定位
        var pwd = document.getElementByName('pwd')[];
        console.log(username.value, pwd.value); //input标签是自闭和的，所以要修改值得时候不是通过innerText，而是通过value
</script>
<body>
</body>
</html>

3、dom 标签的属性

对于属性的修改，默认属性是可以修改的，标签自身没有的属性是不能够修改的

var nid = document.getElementById('dingyi');
undefined
nid.id
"dingyi"
nid.name = '999'; -----> 不会添加name属性
"999"
nid.className = 'aaa'; ----> 会添加class属性
"aaa"

对于本身没有的属性，可以通过setAttribute进行设置

nid.setAttribute('name', '123123') ; ----> 将会创建name属性
undefined

nid.setAttribute('sb', 'lalala'); ----> 自己自定义的属性也可以定义

注：默认属性可以通过xxx.属性名 来进行设置，而其他属性是通过setAttribute()、getAttribute()进行设置

class是通过 ‘xxx.className’ 进行修改

setAttribute()、getAttribute()可以修改所有数据

<div id = "dingyi" aaa="asa" class="c1" style="font-size: 30px; color:red;">

</div>

对于style属性的修改，可以用

var nid = document.getElementById('dingyi');
nid.style.color= 'green';
nid.style.fontSize = px; // font-size这种中间有'-'的，把'-'去掉，并把S大写
           
var nid = document.getElementById('dingyi');
undefined
nid
<div id="dingyi" aaa="asa" class="c1" style="font-size: 30px; color:red;">

</div>
nid.className='asdasdasd';
"asdasdasd"
nid
<div id="dingyi" aaa="asa" class="asdasdasd" style="font-size: 30px; color:red;">

</div>
nid.setAttribute('class','ddd');
undefined
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 30px; color:red;">

</div>
nid.style.fontSize = 'px';
"120px"
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 120px; color: red;">

</div>
nid.style.color = 'green';
"green"
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 120px; color: green;">

</div>

4、提交表单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id='form1' action="https://www.sougou.com/web" method="get">
    <input name="query" type="text">
    <input type="submit" value="提交">
    <div onclick="Submit();">
        提交
    </div>
</form>
<script>
    function Submit(){
        document.getElementById('form1').submit();
    }
</script>
</body>
</html>

通过对div设置onclick属性（单击事件），出发Submit方法，在Submit中，找到form1并提交表单

5、组织表单默认行为

事件表

web开发之路——javascript、dom、jQuery（上）JavaScriptDomjQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id='form1' action="" method="get">
    <input name="query" type="text">
    <input type="submit"  onclick="return MySubmit(); " value="提交">
</form>

<script>
    function MySubmit(){
        var q = document.getElementsByName('query')[];
        if(q.value.trim()){
            return true;
        }else{
            alert('请输入内容');
            return false;
        }
    }

</script>
</body>
</html>

点击提交按钮之后，先执行自己定义的事件，在执行默认事件，自己定义的事件能够先认证用户是否输入，如果没有输入返回false，阻止默认事件的执行

定时器和跑马灯实例

confirm()

出发之后会弹出一个对话框，可以点击”是”或”否”，点击”是”返回true，点击”否”返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button"  value="来点我啊" onmousemove="Myconfirm();">

<script>
    function Myconfirm(){
        var ret = confirm("sssbbb");
           console.log(ret);
    }

</script>
</body>
</html>
           
window.location.href --->返回当前路径
"file:///D:/python/dom/test04.html"

window.location.href = 'http://103.160.102.74:8888' ---> 跳转到
           
window.location.reload() ----> 刷新当前页面

定时器

setInterval(“操作”,”间隔(毫秒)”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎丁一来日</title>
</head>
<body>
<input type="button" onclick="stop_interval()" value="不日了">
<script>
    //setInterval("alert('123')", 2000);
    obj1 = setInterval("Func()", );

    obj2 = setTimeout("alert('timeout_test')", ); //只执行一次操作，用法和setInterval一样
    function Func(){
        var text = document.title;
        var firstchar = text.charAt();
        var subtext = text.substring(, text.length);
        var newtext = subtext + firstchar;
        console.log(text, firstchar, subtext, newtext)
        document.title = newtext;
    }

    function stop_interval(){
        //清除定时器，点击停止
        clearInterval(obj1);
        //清除timeout计时器
        clearTimeout(obj2);
    }


</script>
</body>
</html>

搜索框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>

        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>

jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

jQuery帮助文档

http://www.php100.com/manual/jquery/

1、jQuery选择器

id选择器

标签选择器

class选择器

组合选择器

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id='n1'></div>
    <div class='c1'>11</div>
    <div class='c1'>22</div>
    <a>啦啦啦</a><br>
    <span id='n2'> 卡卡卡 </span>
<script src = "jquery-3.2.1.js"></script>
<script>
    //id选择器
    $("#n1").text('123') //$就代表jQuery，'#n1'代表找到id是n1的标签 .text 表示修改内容
    //标签选择器
    $('div').text('xxx') //找到所有的div。把div的内容都变成xxx
    //class选择器
    $('.c1').text('ooo') //'.c1'代表样式名是c1的标签，# 是id  . 是class
    //组合选择器
    $('.c1, a, #n2').text('ok') //同时寻找多个标签,用逗号隔开
</script>
</body>
</html>
           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div id='n1'>
    <div>
        <div class='c1'>
            <span>
                <a>asdasd</a>
            </span>
        </div>
    </div>
</div>

<script src = "jquery-3.2.1.js"></script>
<script>
//层级选择器
$('#n1 div .c1 span a').text('xxxxxxx') //嵌套的标签的查询，'#n1 '代表n1下的所有标签,$('#n1 a')也能达到效果
</script>
</body>
</html>

2、jQuery其他选择器和筛选器

3、其他选择器

1、parent > child

在给定的父元素下匹配所有的子元素

匹配表单中所有的子级input元素。
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form > input")

结果:
[ <input name="name" /> ]

2、prev + next

匹配所有紧接在 prev 元素后的 next 元素

匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("label + input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]

3、prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

找到所有与表单同辈的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:
$("form ~ input")

结果:
[ <input name="none" /> ]

4、:first

获取第一个元素

获取匹配的第一个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$('li:first');

结果:
[ <li>list item 1</li> ]

5、:not(selector)

去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

查找所有未选中的 input 元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代码:
$("input:not(:checked)")

结果:
[ <input name="apple" /> ]

6、:even

匹配所有索引值为偶数的元素，从 0 开始计数

查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:even")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

7、:odd

匹配所有索引值为奇数的元素，从 0 开始计数

查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

8、:eq(index)

匹配一个给定索引值的元素

查找第二行

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:eq(1)")

结果:
[ <tr><td>Value 1</td></tr> ]

9、:contains(text)

匹配包含给定文本的元素

查找所有包含 "John" 的 div 元素

HTML 代码:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:
$("div:contains('John')")

结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

10、:first-child

匹配第一个子元素

类似的 :first 匹配第一个元素，而此选择符将为每个父元素匹配一个子元素

在每个 ul 中查找第一个 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:
$("ul li:first-child")

结果:
[ <li>John</li>, <li>Glen</li> ]

11、:input

匹配所有 input, textarea, select 和 button 元素

查找所有的input元素，下面这些元素都会被匹配到。

HTML 代码:
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

jQuery 代码:
$(":input")

结果:
[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,

    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,

    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,

    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,

    <textarea></textarea>,
    <button>Button</button>,
 ]

12、:text

匹配所有的单行文本框

查找所有文本框

HTML 代码:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:
$(":text")

[ <input type="text" /> ]

:password、:radio、:checkbox、:submit、:image、:reset、:button、:file 都类似

13、:checked

匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

查找所有选中的复选框元素

HTML 代码:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码:
$("input:checked")

结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

14、:selected

匹配所有选中的option元素

查找所有选中的选项元素

HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代码:
$("select option:selected")

结果:
[ <option value="2" selected="selected">Gardens</option> ]

4、筛选器

1、eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

类似的有get(index),不过get(index)返回的是DOM对象。

参数index描述:
    获取匹配的第二个元素

HTML 代码:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:
$("p").eq(1)

结果:
[ <p> So is this</p> ]

参数-index描述:
    获取匹配的第二个元素

HTML 代码:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:
$("p").eq(-2)

结果:
[ <p> This is just a test.</p> ]

更多筛选器参考http://www.php100.com/manual/jquery/

2、children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

只在子元素里找，不包括子元素的子元素

查找DIV中的每个子元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("div").children()

结果:
[ <span>Hello Again</span> ]

在每个div中查找 .selected 的类。

HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:
$("div").children(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

3、find(expr|obj|ele)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

也包括子元素的子元素

从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:
<p><span>Hello</span>, how are you?</p>

jQuery 代码:
$("p").find("span")

结果:
[ <span>Hello</span> ]

4、next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

找到每个段落的后面紧邻的同辈元素。

HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:
$("p").next()

结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:
$("p").next(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

5、nextAll([expr])

查找当前元素之后所有的同辈元素。

可以用表达式过滤

给第一个div之后的所有元素加个类

HTML 代码:
<div></div><div></div><div></div><div></div>

jQuery 代码:
$("div:first").nextAll().addClass("after");

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

6、prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

找到每个段落紧邻的前一个同辈元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("p").prev()

结果:
[ <div><span>Hello Again</span></div> ]


找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:
$("p").prev(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

7、prevAll([expr])

查找当前元素之前所有的同辈元素

可以用表达式过滤。

给最后一个之前的所有div加上一个类

HTML 代码:
<div></div><div></div><div></div><div></div>

jQuery 代码:
$("div:last").prevAll().addClass("before");

结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

8、siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

除了自己的所有同辈元素

找到每个div的所有同辈元素。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("div").siblings()

结果:
[ <p>Hello</p>, <p>And Again</p> ]

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:
$("div").siblings(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

5、小例子，左边菜单栏 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
                .the_left{
                        float: left;
                        width: %;
                        height:px;
                        background-color:antiquewhite;
                }

                .the_right{
                        float: left;
                        width: %;
                        height:px;
                        background-color:blue;
                }
                .the_title{
                        background-color:black;
                        color:white;
                        height:px;
                        line-height:px;
                }
                .the_body{

                }
                .hide{
                        display:none;
                }
        </style>
</head>

<body>
        <div>
                <div class="the_left">
                        <div class="item">
                                <div class="the_title" onclick="shou(this);">菜单1</div> <!--this是特殊的变量，表示把自己传进去-->
                                <div class="the_body hide">
                                        <div>1.1</div>
                                        <div>1.2</div>
                                        <div>1.3</div>
                                </div>
                        </div>


                        <div class="item">
                                <div class="the_title"  onclick="shou(this);">菜单2</div>
                                <div class="the_body hide">
                                        <div>2.1</div>
                                        <div>2.2</div>
                                        <div>2.3</div>
                                </div>
                        </div>


                        <div class="item">
                                <div class="the_title"  onclick="shou(this);">菜单3</div>
                                <div class="the_body hide">
                                        <div>3.1</div>
                                        <div>3.2</div>
                                        <div>3.3</div>
                                </div>
                        </div>


                </div>
                <div class="the_right"></div>
        </div>
<script src = "jquery-3.2.1.js"></script>

<script>
        function shou(ths){
                //$(ths) ----> 获取菜单1,2,3
                $(ths).next().removeClass('hide') //自己的下一个标签的hide类移除
                $(ths).parent().siblings().find('.the_body').addClass('hide') //自己的父标签的所有兄弟下的是body类的标签，添加hide类
        }

</script>
</body>
</html>
Web开发 javascript jquery DOM
上一篇: web项目开发 之 前端规范 --- JavaScript编码规范 声明：本文转自。原文地址：。感谢作者的分享！更多文章：w3好奇者 JavaScript编码规范
下一篇: H.264句法和语法总结（十一）宏块层预测句法

继续阅读