2018-07-10 第六十五天 jQuery-低调大师

2018-07-10 第六十五天 jQuery

2018-07-09 724

jQuery

一、jQuery概述

1.jQuery的简介

[1]为什么学习jQuery(JavaScript的缺点)：

A、JS书写的代码比较的臃肿

B、JS中获得元素对象的方式比较单一

C、JS实现动画效果非常复杂

D、JS的代码对浏览器是有区分的

[2]什么是JQuery

JavaScriptQuery：JS的库。

目前最流行的JavaScript函数库，对JavaScript进行了封装。

并不是一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

由美国人John Resig在2006年推出，目前最新版本是v3.31。

宗旨：Write less，do more（写更少代码，做更多事情）

官方网址http://jquery.com/

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2017年3月20日）

2.Â $ 的含义

作用1：$(function)---$就是jQuery的省略写法

a.相当于 window.onload=function(){}；

b.功能比window.onload更强大；

1) window.onload一个页面只能写一个,但是可以写多个$() 而不冲突；

2) window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

c.完整形式是$(document).ready(…….)。

作用2：$(selector)选择器

jQuery具有强大的选择器功能

3.Â 隔行变色案例实现

<!DOCTYPE html>

<html>

<head>

.datalist{

border:1px solid #007108;

font-family:Arial;

border-collapse:collapse;

background-color:#d9ffdc;

font-size:14px;

}

.datalist th{

border:1px solid #007108;

background-color:#00a40c;

color:#FFFFFF;

font-weight:bold;

padding-top:4px; padding-bottom:4px;

padding-left:12px; padding-right:12px;

text-align:center;

}

.datalist td{

border:1px solid #007108;

text-align:left;

padding-top:4px;

padding-bottom:4px;

padding-left:10px;

padding-right:10px;

}

</style>

/*JS实现的方式*/

/* window.onload=function(){

//获得所有的tr标签对象

var trs=document.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){

if(i%2==0){

trs[i].style.backgroundColor="red";

}

}*/

/*JQ实现操作*/

$(function(){

$("tr:odd").css("background-color","green");

})

$(function(){

alert("123");

})

/*jQuery(function(){

alert("456");

})

$(document).ready(function(){

alert("789");

})*/

</script>

</head>

<body>

<tr>

<th scope="col">Class</th>

<th scope="col">Birthday</th>

<th scope="col">Constellation</th>

<th scope="col">Mobile</th>

</tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<td>fresheggs</td>

<td>Scorpio</td>

</tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

<td>lovehate</td>

<td>Virgo</td>

</tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<td>shenhuanyan</td>

<td>Aquarius</td>

</tr>

<td>tuonene</td>

<td>Sagittarius</td>

</tr>

<td>ArthurRivers</td>

<td>Pisces</td>

</tr>

<td>reconzansp</td>

<td>Libra</td>

</tr>

<td>linear</td>

</tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<td>dovecho</td>

<td>Sagittarius</td>

</tr>

<td>shanghen</td>

<td>Gemini</td>

</tr>

<td>venessawj</td>

<td>Aries</td>

</tr>

<td>lightyear</td>

<td>Aries</td>

</tr>

</table>

</body>

</html>

二、jQuery中的选择器

1.基本选择器

标签选择器 $(“a”)；

ID选择器 $(“#id”)、$(“p#id”)；

类选择器 $(“.class”)、$(“h2.class”)；

通配选择器 $("*")；

并集选择器$("elem1,elem2,elem3") 。

<!DOCTYPE html>

<html>

<head>

$(function() {

/**********基本选择器***********/

//js的方式获得zh--Element

var zh = document.getElementById("zh");

// JS对象---JQ对象

var zz = $(zh);

// Object--[Element1,Element2,Element3...]

//id选择器

var zh1 = $("#zh");

//元素选择器--jq没有指定具体的下标默认的是第一个

var inp = $("input");

// JQ对象----JS对象

alert(inp[1].value);

alert(inp.eq(1).val());

//类选择器

var inp2 = $(".re");

//所有选择器

$("*").css("background-color", "green");

});

</script>

</head>

<body>

<p>

账号：<input type="text" name="zh" id="zh" class="re" value="123" />

</p>

<p>

密码：<input type="password" name="pwd" id="pwd" class="re" value="987" />

</p>

</body>

</html>

2.层级选择器

后代选择器$(ul li)；

父子选择器 $(ul>li)；

后面第一个兄弟元素（紧跟） prev + next；

后面所有的兄弟元素 prev ~ next。

<!DOCTYPE html>

<html>

<head>

$(function() {

/*********层级选择器***********/

//包含 div下所有包含的span

var span = $("div span");

//必须是直系子节点

var span2 = $("div > span");

//获得下一个节点对象 -- id为span1后面紧跟着的span的对象

var span = $("#span1 + span");

// 获得元素后面的span(同一级别的span)

var span4 = $("#span1~span");

alert(span4.length);

})

</script>

</head>

<body>

<p>

</p>

</div>

</body>

</html>

3.位置选择器

：first；

:last；

:odd；

:even；

:eq(index)；

:lt(index)；

:gt(index)。

案例见4。

4.子元素选择器

:nth-child(index) 这个是从1开始的；

:only-child；

:first-child；

:last-child。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="header_p">form表单</p>

</div>

</header>

<ul>

</ul>

<ul>

</ul>

</div>

$(function() {

/***********基础选择器****************/

//获得第一个元素

$("ul li").first().css("background-color", "red");

$("ul li:first").css("background-color", "red");

//获得最后一个元素对象

$("ul li").last().css("background-color", "green");

$("ul li:last").css("background-color", "green");

//奇数索引从0开始

$("ul li:odd").css("background-color", "green");

//偶数索引从0开始

$("ul li:even").css("background-color", "green");

//获得具体下标位置

$("ul li:eq(3)").css("background-color", "green");

//获得索引小于指定的下标

$("ul li:lt(3)").css("background-color", "green");

//获得索引大于指定的下标

$("ul li:gt(3)").css("background-color", "green");

/**********子元素选择器*************/

// 位置从1开始 ---每一个ul都会看成一个对象

$("ul li:nth-child(1)").css("background-color", "green");

// 如果某个元素是父元素中唯一的子元素，那将会被匹配

$("ul li:only-child").css("background-color", "green");

//匹配第一个子元素

$("ul li:first-child").css("background-color", "green");

//匹配最后一个子元素

$("ul li:last-child").css("background-color", "green");

})

</script>

</body>

</html>

5.属性选择器

[attribute] ；

[attribute1]、[attribute2] ；

[attribute=value]；

[attribute!=value]；

[attribute^=value]；

[attribute$=value；

[attribute*=value]。

案例见6。

6.表单选择器

:text、:password、:radio、:checkbox、:hidden、:file、:submit；

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

:selected 、 :checked 、 :enabled 、 :disabled；

:hidden 、 :visible 、 :not 。

注意$(“input”)和$(“:input”)的区别

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" checked="checked" value="女" />女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="checkbox" name="hobby" value="music" checked/>音乐

<input type="checkbox" name="hobby" value="sports" />体育

<input type="checkbox" name="hobby" value="art" />美术

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

<textarea name="resume" rows="5" cols="40">请输入简历</textarea>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

$(function() {

/****属性选择器*********/

$("input[type=text]").css("background-color", "red");

//name包含s元素对象

$("input[name^=s]").css("background-color", "red");

//只要包含s的元素对象即可

$("input[name*=s]").css("background-color", "red");

//以指定元素结尾的对象

$("input[name$=d]").css("background-color", "red");

//匹配所有不含有指定的属性，或者属性不等于特定值的元素

$("input[name!='pwd']").css("background-color", "red");

/************表单选择器***********/

//获得所有的form表单项

$(":input").length;

//获得标签名称是input 的对象

$("input").length;

// input中type=text所对应的对象

$(":text").css("background-color", "red");

$(":password").css("background-color", "red");

/*********表单属性选择器**************/

//选择input中含有disabled属性表单项

$("input:disabled").css("background-color", "red");

//选择性别只是性别被选择的对象

$("input[name=sex]:checked").eq(0).val();

/*******内容选择器********/

$("td:empty").css("background-color", "green");

})

</script>

</body>

</html>

三、jQuery中操作元素

1.操作元素的属性

<!DOCTYPE html>

<html>

<head>

$(function(){

/***********JQ中元素属性操作*****************/

//JQ中事件的绑定

$("#bu1").click(function(){

//获得姓名的input框

var inp=$("#username");

//获得元素的属性

console.log(inp.attr("type")+"----"+inp.attr("id")+"---"+inp.attr("value"));

//操作元素的属性

inp.attr("type","button");

inp.attr("value","提交");

// inp.attr("value")是对象默认的初始值 inp.val()实时输入的值

alert(inp.val());

//返回值是checked

$("#man").attr("checked",false);

//返回值是true/false

alert($("#man").prop("checked"));

//综合的书写方式{key1:value,key2:value}--json

inp.attr({"type":"button","value":"提交"});

})

</script>

</head>

<body>

<h3>JQ中元素属性操作</h3>

<p>

姓名:<input type="text" name="" id="username" value="123" />

</p>

<p>

性别：

男： <input type="radio" name="" id="man" value="1" checked="checked" />

女： <input type="radio" name="" id="" value="0" />

</p>

</body>

</html>

2.操作元素的样式

<!DOCTYPE html>

<html>

<head>

$(function(){

/***********JQ中元素CSS样式操作*****************/

$("#bu2").click(function(){

//获得div对象

var div1=$("#div1");

//获得对应的css样式

console.log(div1.css("width")+"---"+div1.css("height")+"---"+div1.css("border"))

//[1]直接添加css样式

div1.css("width","300px");

div1.css("height","300px");

div1.css("background-color","pink");

//结合的方式

div1.css({"width":"300px","height":"300px"});

//[2]通过添加类的方式添加css样式

div1.attr("class","div_1");

//直接添加类--如果添加的样式比较多，那么推荐使用第二种形式

div1.addClass("div_1");

//移除类

div1.removeClass("div_1");

})

</script>

<style>

#div1{

width: 200px;

height: 200px;

border: 3px solid gray;

}

.div_1{

background-color: darkgoldenrod;

}

</style>

</head>

<body>

<h3>JQ中元素样式的操作</h3>

</body>

</html>

3.操作元素的内容

<!DOCTYPE html>

<html>

<head>

$(function(){

/**********JQ中元素内容操作***********/

$("#bu3").click(function(){

//获得div对象

var div2=$("#div2");

//等价于 js中innerHTML

console.log(div2.html());

//等价于 JS中 innerTest

console.log(div2.text());

//操作节点的内容

div2.html(div2.html()+"<b>是一家很优秀的企业</b>");

div2.text("<b>是一家很优秀的企业</b>");

})

</script>

</head>

<body>

<h3>JQ中元素内容的操作</h3>

</div>

</body>

</html>

4.操作元素的节点

<!DOCTYPE html>

<html>

<head>

$(function(){

//获得div对象

var div =$("#div1");

// 增加节点 --内部后

div.html(div.html()+"<p>List Item6 </p>");

*div.append("<p>List Item6 </p>");

// 增加节点--内部前

*div.prepend("<p>List Item 0 </p>");

//把一个元素追加到另一个元素中 --现有元素之后

$("#div2").appendTo(div);

//把一个元素追加到另一个元素中 --现有元素之前

$("#div2").prependTo(div);

//增加节点--外部前

div.before("<p>List Item0</p>");

//增加节点--外部后

div.after("<p>List Item6</p>");

//内容清空

div.empty();

//元素的移除

div.remove();

})

</script>

<style>

#div1{

height: 300px;

border: 3px solid goldenrod;

}

#div2{

height: 50px;

border: 3px solid red;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

微信关注我们

原文链接：https://yq.aliyun.com/articles/609445

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

正则表达式（三）：python re模块

以下示例所使用 python 版本为： 3.7 python 提供 re 模块，来满足正则表达式的使用。在开始介绍 re 模块之前，首先说明一下两个小内容：转义字符 \ 转义字符作用是使得字符失去原本的意思，去表示另外一个作用。例如字符 d 表示一个普通的字符 d，加 \ 转义后 \d 表示数字，字符 s 经转义后，\s 表示空白字符。如果要匹配转义符号 \ 本身，则需要表达为 \\ 。而在编程语言中要表达两个转义符号 \\，则需要对每个转义符号进行转义，即形式为 \\\\，需要四个转义符号才能完成用于匹配一个转义符号 \ 的正则表达式。为了减弱转义字符使用上的麻烦，能够将使用者的注意力集中在正则表达式的编写上，这里推荐所有的正则表达式开头使用 r 字符开头，表示正则内容作为原始字符串输入到 re 模块的使用中。即编程环境中 r'\\' 直接作为正则表达式使用，来完成对字符 \ 的匹配。示例： import re reg = r'\\' str = '\\' #转义符号，str实际值为\ if re.match(reg,str): print('match {}'.forma...

2018-07-10

510

在学习Python的过程中，经常会写很多的练手的脚本，那么有没有想过，写到一起呢？当然了，方法有很多，比如写到web网页中，做各种跳转、写到微信中，各种回复关键字调用，还有今天和大家分享的GUI图形用户界面！构建基本框架 Python中有标准库tkinter，不需要安装即可使用！可以用来写简单的GUI程序，只需要短短几行代码就可以了，比如下面这个：具体教程大家可以去自行搜索，这里就不一一细说了，注释也写的很清楚！将自己的其他脚本都写到GUI程序中其实可以导入其他脚本中的函数，来达到多个脚本整合的效果，但是那样又不是很方便，就先放到一起了，慢慢在完善！首先是将之前的天气预报写入（这里有个城市代码的字典省略了，很长，大家可以去我相关的文章中查找） def weather(): ''' 天气预报查询 ''' global city_code_list#城市列表 city = entry.get()#获取输入的城市名 if city in city_code_list: city_code = city_code_list[city] home_page = 'http://www....

2018-07-10

599

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。