Python学习-day17

Posted 2020-08-21

一、jQuery

      jQuery 是一个 JavaScript 的第三方库。本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，提供更好更方便快捷的DOM处理与开发中经常使用的功能，jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！引用jQuery脚本文件，方法一是引用jQuery在线脚本，方法二是引用本地jQuery脚本。

      jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。jQuery对象和DOM对象可以互相转换。DOM对象转换成jquery对象 var jqueryObj=$(DOM obj);

jQuery对象转换为DOM对象，因为jquery对象返回的是一个数组对象所以可以采用如下方式转换：var domObject = jqueryObj[0].

二、jQuery选择器

     jQuery基本选择器有：id选择器、类选择器、标签选择器、属性选择器、组合选择器

1. id选择器

     如果某个标签有id属性，那么利用jQuery查找

1 // 查找<div id="ID">:
2 var div = $(‘#ID’);

jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。如果id为ID的对象不存在，jQuery返回[],不会返回undefined或者null。

2. 类选择器

1 // <div class="red">...</div>
2 var a = $(‘.red‘); // 所有节点包含`class="red"`都将返回

通常很多节点有多个class，我们可以查找同时包含red和green的节点：

1 // <div class="red green">...</div>
2 var a = $(‘.red.green‘); // 注意没有空格！

3. 标签选择器

1 //<p>abcd</p>
2 var ps = $(‘p‘); // 返回所有<p>节点

4. 属性选择器

1 var ussername = $(‘[name=username]‘); 
2 
3 var password = $(‘[type=password]‘); 

 5. 组合选择器   

组合查找就是把上述简单选择器组合起来使用。如果我们查找$(‘[name=email]‘)，很可能把表单外的<div name="email">也找出来，但我们只希望查找<input>，就可以这么写：

1 // 不会找出<div name="email">
2 var emailInput = $(‘input[name=email]‘); 

也可以根据标签和类名组合查找：

var v = $(‘span .red‘); 

6. 层级选择器

如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant‘)来选择，层级之间用空格隔开。例如：

$(‘#i1 a‘)

子选择器$(‘parent>child‘)类似层级选择器，但是限定了层级关系必须是父子关系，就是<child>节点必须是<parent>节点的直属子节点。

$(‘#i2>span‘)

7. 过滤选择器

选择器	说明	返回
:first	匹配找到的第1个元素	单个元素
:last	匹配找到的最后一个元素	单个元素
:eq	匹配一个给定索引值的元素	单个元素
:even	匹配所有索引值为偶数的元素	集合元素
: odd	匹配所有索引值为奇数的元素	集合元素
:gt(index)	匹配所有大于给定索引值的元素	集合元素
:lt(index)	匹配所有小于给定索引值的元素	集合元素
:not	去除所有与给定选择器匹配的元素	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素
focus	选取当前正在获取焦点的元素	集合元素

8. 表单选择器

 

选择器	说明
:input	选取所有input textarea select button元素
:text	选取所有单行文本框
:password	选取所有密码框
:radio	选取所有单选框
:checkbox	选取所有多选框
:submit	选取所有的提交按钮
:image	选取所有的图像按钮
:reset	选取所有的重置按钮
:button	选取所有的按钮
:file	选取所有的上传域
:hidden	选取所有的不可见元素

三、修改节点信息

      通过选择器获取到jQuery对象，然后就可以操作DOM节点啦 

1. 修改text

    jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作。

1 var port = $(tds[0]).text();
2 var h = $(‘:input‘).html()

1  $(tag).text(‘+1‘);

 2. 修改css

     修改css使用jQuery的css()方法

1 $(tag).css(‘color‘,‘green‘);
2 $(tag).css(‘position‘,‘absolute‘);
3 $(tag).css(‘fontSize‘,fontSize + "px");
4 $(tag).css(‘right‘,right + "px");