选择器 – 个人随笔 / Sun, 20 May 2018 01:24:07 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.6.1 /wp-content/uploads/2022/01/cropped-截屏2022-01-01-18.57.09-32x32.png 选择器 – 个人随笔 / 32 32 Jquery（一）选择器、操作类、直接样式操作、偏移、操作 HTML 和文本、值操作、Each 循环、复选框选择 /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/3458.html /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/3458.html#respond Sat, 19 May 2018 09:51:01 +0000 /?p=3458 JQuery第一讲

jQuery简介

jQuery是一个开源的，JavaScript脚本库。

jQuery体系

部署jQuery开发环境

  1. 去网站下载jquery代码

脚下留心：从官方网站同一个版本可以下载2个文件，一个是源文件，一个是压缩文件，我们开发的时候使用压缩文件。

  1. 在页面引入jQuery文件

jQuery选择器

jQuery中，所有的操作都要转成jQuery对象进行操作。通过$()将元素转成JQuery对象。

$()=jQuery()

基本选择器

id选择器、class选择器、标签选择器、组合选择器、后代选择器，子类选择器

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<!—引入jQuery文件–>

<script type=”text/javascript” src=’js/jquery-1.11.3.min.js’></script>

<script type=”text/javascript”>

//但页面加载完成时

$(document).ready(function(e) {

//当按钮点击的时候

$(‘#btn’).click(function(e) {

//$(‘#first’).addClass(‘indianred’); //id选择器

//$(‘.second’).addClass(‘indianred’); //class样式

//$(‘th’).addClass(‘indianred’); //标签选择器

//$(‘#first,.second’).addClass(‘rose’); //组合选择器

//$(‘.second td’).addClass(‘red’); //后代选择器

//$(‘.second>td’).addClass(‘red’); //后代选择器

//$(‘#first+.second’).addClass(‘indianred’); //紧挨着#first的.second

$(‘#first~.second’).addClass(‘indianred’); //#first后所有的.second

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

<tr class=’second’>

<th colspan=”3″><table width=”100%” border=”1″>

<tr>

<td>aa</td>

<td>bb</td>

<td>&nbsp;</td>

</tr>

</table></th>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

过滤选择器

  1. 位置过滤

    1. :first——第一个元素
    2. :last——最后一个元素
    3. :even——第偶数个元素（下标从0开始）
    4. :odd——第奇数个元素
    5. :eq(index)——第index元素
    6. :gt(index)——大于第index的元素
    7. :lt(index)——小于第index的元素

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘tr:first’).addClass(‘indianred’); //第一个tr

//$(‘tr:last’).addClass(‘indianred’); //最后一个tr

//$(‘tr:even’).addClass(“indianred”); //第偶数个元素（下标从0开始)

//$(‘tr:odd’).addClass(“indianred”); //第奇数个元素

//$(‘tr:eq(2)’).addClass(‘indianred’); //第2个元素

$(‘tr:gt(1)’).addClass(‘indianred’); //大于1的元素

$(‘tr:lt(1)’).addClass(‘rose’); //小于1的元素

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

  1. 内容过滤

    1. :contains(‘内容’)，包含指定内容的元素
    2. :has() 包含某个子元素
    3. : not() 去除某个元素
    4. :header 匹配所有标题h1~h6
    5. :empty 匹配所有空元素
    6. :parent 匹配父节点

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘div:contains(“锄禾”)’).addClass(‘indianred’); //包含”锄禾”的div

//$(‘div:has(p)’).addClass(‘indianred’); //含有p标记的div

//$(‘div:has(#first)’).addClass(‘indianred’); //含有#first的div

//$(‘div:not(.no1)’).addClass(‘indianred’); //去除掉.no1的div

//$(‘:header’).addClass(‘indianred’); //选中所有的h1~h6

//$(‘:empty’).addClass(’empty’); //匹配所有空元素

$(‘#first:parent’).addClass(’empty’); //匹配#first的父节点

});

});

</script>

<div class=”first no1″><p>锄禾日当午</p></div>

<div class=”first”><p id=”first”>汗滴禾下土</p></div>

<h1>一级标题</h1>

<h2>二级标题</h2>

<div></div>

<input type=”button” value=”点击” id=”btn” />

  1. 子元素过滤选择器

    1. :first-child——父元素的第一个子元素
    2. :last-child——父元素的最后一个子元素
    3. :only-child——父元素只有一个元素的节点
    4. :nth-child(编号,even,odd)——父元素下的指定编号，偶数，奇数的子元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘li:first-child’).addClass(‘indianred’); //li父元素的第一个子元素

//$(‘li:last-child’).addClass(‘indianred’); //li父元素的最后一子元素

//$(‘li:only-child’).addClass(‘indianred’); //li父元素只有一个元素的节点

//$(‘li:nth-child(2)’).addClass(‘indianred’); //li父元素下第2个子元素，从1开始

//$(‘li:nth-child(even)’).addClass(‘indianred’); //li父元素下第偶数个子元素

$(‘li:nth-child(odd)’).addClass(‘indianred’); //li父元素下第奇数个子元素

});

});

</script>

<ul>

<li>三国演义</li>

<li>水浒传</li>

<li>西游记</li>

</ul>

<ul>

<li>钢铁侠</li>

<li>超人</li>

</ul>

<ul>

<li>大棒子</li>

</ul>

<input type=”button” value=”点击” id=”btn” />

  1. 表单过滤选择器

    1. :input——匹配input, select, textarea，button标签
    2. :text——匹配文本框
    3. :password——匹配密码框
    4. :enabled——可以的元素
    5. :radio——单选按钮
    6. :checkbox——复选框
    7. :checked——选中的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:input’).addClass(‘indianred’); //表示input,select,textarea，button标签

//$(‘:text’).addClass(‘indianred’); //文本框

//$(‘:password’).addClass(‘indianred’); //密码框

//$(‘:enabled’).addClass(‘indianred’); //可用的元素

//$(‘:radio,:checkbox’).addClass(‘style1’); //单选按钮和复选框

$(‘:checked’).addClass(‘style1’); //选中的元素

});

});

</script>

姓名：<input type=”text” disabled=”disabled”/><br />

密码：<input type=”password” /><br />

性别：<input type=”radio” name=”sex” value=”男” checked=”checked” />男

<input type=”radio” name=”sex” value=”女” />女<br />

爱好：<input type=”checkbox” value=”爬山” checked=”checked” />爬山

<input type=”checkbox” value=”游泳” />游泳 <br />

籍贯：<select>

<option>上海</option>

<option>北京</option>

</select><br />

意见和建议：<textarea></textarea> <br />

<input type=”submit” value=”提交” />

<input type=”reset” value=”重置” />

<input type=”button” value=”点击” id=”btn” />

<button>这也是按钮</button>

  1. 属性过滤选择器

    1. [属性]：匹配带有指定属性的元素
    2. [属性=value]：匹配属性=value的元素
    3. [属性!=value]：匹配属性!=value的元素
    4. [属性^=value]：匹配属性以value开头的元素
    5. [属性$=value]：匹配属性以value结尾的元素
    6. [属性*=value]：匹配属性以包含value的元素
    7. [属性1=value1][属性2=value2]：同时具有属性1和属性2的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:text[class]’).addClass(‘indianred’); //带有class属性的文本框元素

//$(‘[class]’).addClass(‘indianred’); //带有class属性的所有元素

//$(‘:text[name=firstname]’).addClass(‘indianred’); //name=firstname的文本框元素

//$(‘:text[name!=firstname]’).addClass(‘indianred’); //name!=firstname的文本框元素

//$(‘:text[name^=first]’).addClass(‘indianred’); //name属性的值以first开头的元素

//$(‘:text[name$=name]’).addClass(‘indianred’); //name属性的值以name结尾的元素

//$(‘:text[name*=stna]’).addClass(‘indianred’); //name属性中带有stna的元素

$(‘:text[name$=name][class]’).addClass(‘indianred’);//name属性的值以name结尾的元素，同时带有class属性

});

});

</script>

<input type=”text” name=”firstname” value=”张” class=’stu’ /> <br />

<input type=”text” name=”middlename” value=”三” /><br />

<input type=”text” name=”lastname” value=”峰” /><br />

<input type=”text” name=”firstcity” value=”上海” class /><br />

<input type=”button” value=”点击” id=”btn” />

<div class=””>锄禾日当午</div>

操作属性

  1. jQuery对象.attr(属性)：获取对象的属性值，只获取第一个元素
  2. jQuery对象.attr(属性,值)：将值付给所有的jQuery对象
  3. jQuery对象.attr(属性,function(){}); //将函数的返回值付给属性
  4. jQuery对象.attr({属性:属性值,属性:属性值})
  5. jQuery对象.removeAttr(属性名)

操作类

  1. addClass(类名)——添加类
  2. removeClass(类名)——删除类
  3. toggleClass(类名)——交替

直接样式操作

  1. css(name)：获取样式的值
  2. css(name,value)：给样式赋值
  3. css({样式:值，样式:值})

offset()：偏移

坐标原点是浏览器客户端的左上角

注意：

宽度、高度操作

  1. width()：获取宽度
  2. width(value)：设置宽度
  3. height()：获取高度
  4. height(value)：设置高度

操作HTML和文本

  1. html()：获取HTML代码
  2. html(value)：将value作为HTML付给元素
  3. text()：获取文本
  4. text(value)：将value的值作为文本付给元素

值操作

  1. val()：获取值
  2. val(value)：给value属性赋值

each循环

方法一：$.each(数组/对象，回调函数)

方法二：jQuery元素.each(回调函数)

例题（复选框选择）

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//全选

$(‘:button:first’).click(function(e) {

$(‘:checkbox’).attr(‘checked’,’checked’);

});

//反选

$(‘:button:eq(1)’).click(function(e) {

$(‘:checkbox’).each(function(index, element) {

$(this).attr(‘checked’,!$(this).attr(‘checked’));

});

});

//取消全选

$(‘:button:last’).click(function(e) {

$(‘:checkbox’).removeAttr(‘checked’);

});

});

</script>

<input type=”button” value=”全选” />

<input type=”button” value=”反选” />

<input type=”button” value=”取消全选” />

<form>

<input type=”checkbox” value=”读书” name=”hobby” />读书<br />

<input type=”checkbox” value=”游泳” name=”hobby”/>游泳<br />

<input type=”checkbox” value=”看报” name=”hobby”/>看报<br />

</form>

脚下留心：jQuery版本不同，有少部分方法也会有差异。

多学一招：通过val()实现选中功能

  1. 能够在html代码中引入jQuery库
  2. 能够理解选择器的作用
  3. 能够说出或使用多种选择器
  4. 能够组合使用选择器
  5. 能够使用jQuery操作html属性
  6. 能够使用jQuery操作css属性
  7. 能够熟练使用jQuery()的页面载入事件ready()
  8. 能够理解each()的作用
  9. 能够使用each()方法遍历jQuery对象
  10. 能够解释dom对象和jQuery对象的区别
  11. 能够将dom对象和jQuery对象相互转换
  12. 能够使用bind()方法绑定事件
  13. 能够熟练使用jQuery的常规事件绑定语法
  14. 能够使用事件切换方法hover(),toggle()
  15. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
  16. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
  17. 能够使用jQuery的淡入淡出特效方法
  18. 能够将内容插入到元素内部或外部
  19. 能够清空元素内容或删除元素本身
  20. 能够使用replaceWith()替换元素
  21. 能够复制指定元素
  22. 能够把内容从外面包裹上新元素
  23. 能够使用元素查找或匹配的多个方法
  24. 能够理解jQuery中插件的作用
  25. 能够制作自定义插件
  26. 能够使用jQuery实现ajax的get请求
  27. 能够使用jQuery实现ajax的post请求
]]> /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/3458.html/feed 0 CSS（一）CSS、 伪类、 进制、 选择器、 颜色 /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/193.html /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/193.html#respond Thu, 17 May 2018 14:03:14 +0000 /?p=193 回顾
  1. 标签通用属性
    1. id：标签唯一的编号
    2. class：标签属于的类别
    3. width：宽度 height：高度
    4. name：元素的名字
  2. 表单域：<form>
  3. 表单元素
    1. 文本框：<input type=’text’ name=’’ size=’’ maxlengh=’’/>
    2. 密码框：<input type=’password’ name=’’/>
    3. 单选按钮：<input type=radio>
      1. 同一组的单选按钮的名字要一致
      2. 要给无法输入的表单元素赋值
    4. 复选按钮：<input type=’checkbox’>
    5. 下拉菜单：<select><option></option></select>
    6. 下拉列表：<select size=’’ multiple><option></option></select>
    7. 文本域：<textarea cols=’’ rows=’’></textarea>
    8. 提交按钮：<input type=’submit’ name=’’/>
    9. 重置按钮：<input type=’reset’ name=’’/>
    10. 普通按钮：<input type=’button’/>
  4. 使用表单
    1. action属性：表单提交的位置，如果action=’’表示表单提交给自己
    2. method属性：值有get和post
  5. 框架
    1. <frameset>框架集
    2. <frame>框架

练习一：写入如下的框架结构

<html>

<frameset cols=”100,*”>

<frame src=””>

<frameset rows=”100,*”>

<frame src=””>

<frame src=””>

</frameset>

</frameset>

</html>

练习二：写出如下框架

<html>

<frameset rows=”*,*”>

<frameset cols=”*,*”>

<frame src=””/>

<frame src=”/>”

</frameset>

<frameset cols=”*,*”>

<frame src=””/>

<frame src=””/>

</frameset>

</frameset>

</html>

  1. 内嵌框架：<iframe>，嵌套在页面内部
  2. HTML5新特点
    1. 语法更加简单
    2. 语法更加宽松
    3. 标签语义化
  3. HTML5新增常用属性
    1. required：必填
    2. placeholder：默认显示内容
    3. autofocus：自动获取焦点
  4. input标签新增type属性
    1. type=”email”
    2. type=”date”
    3. type=”time”
    4. type=”month”
    5. type=”week”
    6. type=”number”
    7. type=”range”
    8. type=”color”
  5. 多媒体标签
    1. <embed>：可以播放音频和视频
    2. <audio>
      1. 方法一

<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>

      1. 方法二：

<audio controls autoplay>

<source src=”music/music.mp3″>

<source src=”music/music.ogg”>

</audio>

    1. <video>

多学两招

optgroup

HTML5中表单元素可以不放在表单中

HTML5中表单元素可以不放在表单中，通过id属性将他们关联起来

计算机的单位，进制与进制间的转换

计算机的单位

  1. 计算机中的电子器件，电子器件只有两个状态，通电与不通电，通就是1，不通就是0。所以计算机内部只能传输0和1。
  2. 既然只能传输0和1，计算机用的是二进制。
  3. 一个字节的大小可以一个字符，一个字节=8位

  1. 计算机最小的单位是“位”，一个位就是一根线传输的数据

1K=1024（210）个字节

1M=1024K，220个字节

1G=1024M，230个字节

1T=1024G，240个字节

进制

我们原来学习的是十进制，逢十进一，十进制中有十个数字。我们以此类推，二进制就是逢二进一，二进制就两个数字，0和1。

在计算机中，我们需要用到的进制有，二进制，八进制，十进制，十六进制。

进制 包含数字
二进制 0,1
八进制 0,1,2,3,4,5,6,7
十进制 0,1,2,3,4,5,6,7,8,9
十六进制 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

（1+1）2=（10）2

（7+6）8=（15）8

（A+6+B）16=（1B）16

进制转换（将其他进制转成10进制）

分析：以十进制为例，以10为底，指数从右往左以此为0次方，1次方，2次方…

(123)10=1*102+2*101+3*100

（3456）10=3*103+4*102+5*101+6*100

以此类推

(1100)2=1*23+1*22+0*21+0*20=12

(1011)2=1*23+0*22+1*21+1*20=11

(763)8=7*82+6*81+3*80

(FF)16=15*161+15*160=255

(2B)16=2*161+11*160=43

进制转换（十进制转成二进制）

整数方法：除2反向取余数，小数部分是乘2正向取整数

(11)10=(1011)2

(19)10=(10011)2

多学一招：八进制和十六进制转成二进制和十进制转换不一样，八进制是将每一八进制位数字转成3位的2进制，16进制是将每一位数字转成4位的二进制数字，然后合并起来

(13)8=(1011)2

分析：

1的3位二进制是001

3的3位二进制是011

(13)16=(10011)2

分析：1的4位二进制0001

3的4位二进制是0011

(0.25)10=(0.01)2

重点：十进制和二进制的整数部分的转换。

网页中颜色表示的含义

  1. 光的三原色（RGB），red green blue，他们的取值范围是0-255，转成十六进制00-FF。
  2. 颜色的色值以#开头
  3. 例题
    1. #FF0000：红色
    2. #00FF00：绿色
    3. #006600：绿色
    4. #0000FF：蓝色
    5. #000000：黑色
    6. #FFFFFF：白色
    7. #555555：灰色
    8. #5c5c5c：灰色
    9. #112233：由11的红，22的绿，33的蓝组成的颜色

DW设计器的使用

插入图片

方法一：

方法二：

插入换行

回车：换段

shift+回车：换行

添加超链接

第一步：选中文本或图片

第二步：在属性面板上

插入表格

脚下留心：表格是可以嵌套的。

合并单元格

选中需要合并的单元格，点击“合并”按钮即可

选中需要拆分的单元格，点击“拆分”按钮即可。

标签选择器的使用

此工具用来选择标签内容非常方便。

CSS介绍

  1. 我们在做网站的时候有一个原则：表现（样式）和内容要分离。表现是由CSS控制的，内容是由HTML控制器的。
  2. CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

语法

CSS以<style>开头，</style>结束，建议样式代码写在<head></head>之间。

语法结构：

<style type=”text/css”>

选择器{

属性:属性的值;

属性:属性的值;

}

</style>

CSS样式由选择器、属性、属性的值组成。

注释

语法：/* 注释的内容 */

两个排版标签

<div></div>

<span></span>

这两个标签叫块标记，这两个标记中用来放内容。他们的区别：

  1. 一般来说，<div>中可以放图片，文字，视频等网页内容，<span>一般只能存放文字。
  2. 显示方式不一样

CSS选择器（符）

ID选择器

  1. id选择器以#开头
  2. id选择器只能供一个元素使用

类样式（class样式）

  1. 以点（.）开头
  2. 可以供多个元素使用

标签选择器

通过标签来选择元素

通配选择器

通过星号（*）来表示所有标签，对所有标签添加样式

组合选择器

如果有多个选择器的样式是一样的，我们可以将这些选择器组合起来一起写。

<style type=”text/css”>

/*组合选择器*/

div,span{

color:#F00;

}

#first,h1{

color:#060;

}

</style>

<div>锄禾日当午，</div>

<p id=”first”>汗滴禾下土。</p>

<span>谁知盘中餐，</span>

<h1>粒粒皆辛苦。</h1>

后代选择器

子元素选择器（父元素>子元素）

相邻元素选择器

#first+div：紧挨着#first之后的div

#first~div：#first之后的所有的div

伪类

元素:link 正常连接时候的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态

元素:active 当鼠标按下去时候的状态

脚下留心：不是所有的元素都支持这4个状态，有的元素可能只支持其中的某个状态。但是超链接支持这4种状态。

脚下留心：这四种状态要按照lvha的顺序写。（love 爱 hate 恨）

<style type=”text/css”>

a:link{ /*正常连接时候的状态*/

color:#F00;

text-decoration:none; /*文本修饰*/

font-size:12px;

}

a:visited{ /*点击后的状态*/

color:#F0F;

text-decoration:none;

font-size:12px;

}

a:hover{ /*当鼠标移动到a标记的时候状态*/

color:#060;

text-decoration:underline;

font-size:24px;

}

a:active{ /*当鼠标点击下去的状态*/

color:#00F;

text-decoration:underline;

font-size:24px;

}

</style>

<a href=”#”>超链接1</a> <br>

<a href=”#”>超链接2</a>

例题一

例题二：

]]> /%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/193.html/feed 0