第五十四天:jQuery内容的基础:

1.上街内容的补充:

  1.1innerHTML:(获取子标签及子标签的内容·)

var d1Ele=document.getElementById('d1');
var d1H1=d1Ele.innerHTML;
console.log(d1H1);
var d1h1=d1Ele.innerHTML='';
console.log('d1h1',d1h1);
结果为:

    <div>dfhinhji</div>
    <p>fjinfjk</p>
    <h1>fjdsin</h1>

01上界内容回顾.js:8 d1h1 
View Code

  1.2输入框时间的问题:(清除有问题)

function foo(){
    t1=new Date();
    strT1=t1.toLocaleString();
    var d1Ele=document.getElementById('i1');
    d1Ele.value=strT1;

}
var t;
var startbutton=document.getElementById('start');
startbutton.onclick=function(){
    if (t==undefined){
        t=setInterval(foo,3000);
        t=1;
    console.log(t);
    }

}
var stopbutton=document.getElementById('stop');
stopbutton.onclik=function(){
    clearInterval(t);
    console.log('fhjh');
    t=undefined;
}
View Code

今日新内容:jQuery

2.基本选择器:

  2.1 id选择器:

$('#d1');
View Code

  2.2标签选择器:

$('div');
View Code

  2.3类选择器:

userscript.html?id=3743f8e2-9258-415a-8a6b-6f0849b54fb6:12105  SpeedyPlay Info: waiting...
$('.c1');
View Code

  注如果想要获取具体的某一个元素可以先找到之后在通过索引进行取到:

$('.c1')[0];
<div id=​"d1" class=​"c1">​我是第一个div​</div>​
View Code

3。其他选择器:

  3.1找到所有元素属性的方法:

$('*');
结果为
0: html
1: head
2: meta
3: title
4: body
5: div#d1.c1
6: div#d2.c1
7: p#p1.c1
8: h1#h1.c1
9: script
length: 10
prevObject: k.fn.init [document]
__proto__: Object(0)

​
View Code

  3.2组合属性,(找到要不满足x和要不满足y的所有元素集合)

$('div,p');
结果为
0: div#d1.c1
1: div#d2.c1
2: p#p1.c1
length: 3
View Code

4.层级选择器:

  html程序:

<div id="d1">
    <div id="d2">我是div里面的儿子div
        <div id="d3">我是div里面的孙子div</div>
        <p>我是div里面的孙子p</p>
    </div>
    <p>我是div里面的儿子p</p>
    <p>我是div里面的儿子p</p>
</div>
View Code

  4.1 x所有后代选择器

$('#d1 div');
结果为
0: div#d2
1: div#d3
length: 2
View Code

  4.2x后面所有的儿子选择器:

$('#d1>p');
结果为
0: p
1: p
length: 2
View Code

  4.3找到紧跟在x后面的y:

$('#d4+p');
结果为
0: p
length: 1
View Code

  4.4x之后的所有兄弟·:

$('#d5~p');
结果为
0: p#d4
1: p
length: 2
View Code

5.js和jQuery的特点去边和转换问题:

  5.1js中找到 id=d1的标签:

document.getElementById('d1');
<div id=​"d1">​…​</div>​
View Code

  5.2通过jquery找到id=d1的标签:(jQuery在进行变量命名时要在前面加上$);

$('#d1');
结果为
0: div#d1
length: 1
View Code

  5.3jQuery对象转换成Dom对象,用索引取出具体的标签:

$('#d4')[0];
结果为
View Code

  5.4dom对象转换成jQuery对象,使用$(dom对象)

var d4Ele=document.getElementById('d4');
undefined
$(d4Ele);
结果为
0: p#d4
length: 1
View Code

6.筛选器:

<div id="d1">
    <ul>
        <li>0</li>
        <li>0</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
View Code

  6.1选择同一级别标签中的第一个元素:

$('#d1 li:first');
View Code

  6.2选择同一级标签中的最后一个标签:

$('#d1 li:last');
View Code

  6.3先要找同一级标签中任意一个标签可以使用下面命令:

$('#d1 li:eq(3)');
View Code

  6.4也可以找同一级标签中大于某个数以上的标签:

$('#d1 li:gt(3)');
View Code

  6.5也可以找同一级标签中小于某个数以下的标签:

$('#d1 li:lt(3)');
View Code

  6.7属于同一个类型标签,但是不想要其中某一个元素的标签(这一个标签有一个独立的特征):(not就是移除不满足条件的)

$('#d1 li:not(.c1)');
结果为
0: li
1: li
2: li
3: li
length: 4
View Code

  6.8:属于同一个类型标签,但是想要其中某一个元素的标签(这一个标签有一个独立的特征):(has就是找出满足条件的标签)

$('#d3 div:has(a)');
View Code

7.属性选择器在表单中的应用:

$('input[name=hobby]');
View Code

8.常用的表单删选元素:

1.:text; 2:password; 3: file; 4:radio; 5:checkbox; 6:sumbit; 7:reset; 8:button;  

  8.1使用方法:$([  ] )  列子如下:

$('input[type=checkbox]');
结果为
0: input
1: input
2: input
length: 3
View Code

9.jQuery的一些基本操作:

  9.1找同一级标签中的前面第一个标签:

$('#d3').prev();
结果为
0: li#d2
length: 1
View Code

  9.2找同级标签中前面所有的标签:

$('#d3').prevAll();
结果为
0: li#d2
1: li#d1
length: 2
View Code

   9.3找同一级标签中的后面第一个标签:

$('#d3').next();
结果为
0: li#d4
length: 1
View Code

  9.4找同级标签中前面所有的标签:

$('#d2').nextAll();
结果为
0: li#d3
1: li#d4
length: 2
View Code

  9.5找父类标签:

$('#d4').parent();
View Code

  9.6连着找父类:

$('#d4').parent().parent();
结果为
0: div#d2
length: 1
prevObject: k.fn
View Code

10python中的类也可用链式操作:

class Myteacher:
    def __init__(self,name):
        self.name=name
    def show(self):
        print(self.name)
        return self
    def text(self):
        print('haha')
teacher=Myteacher('alex')
teacher.show().text()
View Code

11.查找所有的父类:

$('#d4').parents();
结果为
0: div#d3
1: div#d2
2: div#d1
3: body
4: html
length: 5
prevObject:
View Code

12查找所有的父类直到:

$('#d4').parentsUntil('#d1');
结果为
0: div#d3
1: div#d2
length: 2
prevObject: k.
View Code

13.查找自己的儿子;也可以用链式:

$('#d1').children();
View Code

14.找自己所有的兄弟:(除了自己):

$('#d1').siblings();
结果为
0: p
1: p
2: script
length: 3
View Code

 

 

 

 

 

 

 

 

 

 

 

  

  

posted @ 2020-04-01 13:15  chown  阅读(151)  评论(0编辑  收藏  举报