Python开发【前端】：jQuery

首页 > 代码库 > Python开发【前端】：jQuery

Python开发【前端】：jQuery

2024-08-24 13:32:35 245人阅读

jQuery简介

　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

jQuery版本和使用

jQuery有1.x、2.x、3.x三个大的版本，推荐使用1.x的最新版本（兼容性更换），本次使用的版本为jquery-1.12.4.js

引用：

<script src="http://www.mamicode.com/jquery-1.12.4.js"></script>

下载地址-》》jquery-1.12.4.js、jquery-1.12.4.min.js

Dom和jQuery对象相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">James</div>

    <script src="jquery-1.12.4.js"></script>
</body>
</html>

target.html

jQuery转换为Dom:

> $(‘#i1‘)
< [<div id=?"i1">?James?</div>?]
> document.getElementById(‘i1‘)
< <div id=?"i1">?James?</div>?
>$(‘#i1‘)[0]
< <div id=?"i1">?James?</div>?

Dom转换为jQuery:　　

> $(‘#i1‘)
< [<div id=?"i1">?James?</div>?]
> d1 = document.getElementById(‘i1‘)
< <div id=?"i1">?James?</div>?
> $(d1)
< [<div id=?"i1">?James?</div>?]

jQuery选择器

一、基本选择器

① id选择器

<div id="id">James</div>
$(‘#id‘)

② clss选择器

<div class="c1">James</div>
$(‘.c1‘)

③ 标签选择器　

查找所有的a标签：

<div id="id">James</div>
<div class="c1">
    <a>f</a>
</div>
<div class="c1">
    <a>f</a>
    <a>f</a>
</div>
$(‘a‘)

④ *表示所有

$(‘*‘)

⑤ 多查询（selector1,selector2,selectorN）

<div id="id">James</div>
<div class="c1">
    <a>f</a>
</div>
<div class="c1">
    <a>f</a>
    <a>f</a>
</div>
$(‘#id,.c1,a‘)

二、层级选择器

① ancestor descendant(查找包含的所有-子子孙孙)

<div id="i1" class="c1">
    <div>
        <a>a</a>
    </div>
    <a>b</a>
    <a>c</a>
</div>

> $(‘#i1 a‘)
< [<a>?a?</a>?, <a>?b?</a>?, <a>?c?</a>?]

所有包含

② parent > child(只查找下一级所有-儿子)

<div id="i1" class="c1">
    <div>
        <a>a</a>
    </div>
    <a>b</a>
    <a>c</a>
</div>

> $(‘#i1 > a‘)
< [<a>?b?</a>?, <a>?c?</a>?]

下一级包含

③ prev + next(查找同级相邻的一个)

<div id="i1" class="c1">
    <div>
        <input name="name"/>
        <a>a</a>
    </div>
    <a>b</a>
    <input name="name"/>
    <a>c</a>
    <a>d</a>
</div>

> $(‘input + a‘)
< [<a>?a?</a>?, <a>?c?</a>?]

同级向下匹配一个

④ prev ~ siblings(查找同级下面所有)

<div id="i1" class="c1">
    <div>
        <input name="name"/>
        <a>a</a>
    </div>
    <a>b</a>
    <input name="name"/>
    <a>c</a>
    <a>d</a>
</div>

> $(‘input ~ a‘)
< [<a>?a?</a>?, <a>?c?</a>?, <a>?d?</a>?]

同级向下匹配所有

三、基本筛选器

操作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>

ul.html

① :first（获取匹配的第一个元素）

> $(‘ul li:first‘)
< [<li>?list item 1?</li>?]

② :last（获取匹配的最后一个元素）

> $(‘ul li:last‘)
< [<li>?list item 5?</li>?]

③ :eq（匹配一个给定索引值的元素）

> $(‘ul li:eq(1)‘)
< [<li>?list item 2?</li>?]

④ :gt（匹配所有大于给定索引值的元素）

> $(‘ul li:gt(2)‘)
< [<li>?list item 4?</li>?, <li>?list item 5?</li>?]

⑤ :lt （匹配所有小于给定索引值的元素）

> $(‘ul li:lt(2)‘)
< [<li>?list item 1?</li>?, <li>?list item 2?</li>?]

⑥ 其他

:not(selector)    去除所有与给定选择器匹配的元素
:even                 匹配所有索引值为偶数的元素，从 0 开始计
:odd                   匹配所有索引值为奇数的元素，从 0 开始计数
:lang(language)  选择指定语言的所有元素
:header              匹配如 h1, h2, h3之类的标题元素
:animated           匹配所有正在执行动画效果的元素
:focus                  匹配当前获取焦点的元素
:root                    选择该文档的根元素
:targe                  选择由文档URI的格式化识别码表示的目标元素

更多...

四、属性选择器

① [ ]（匹配包含给定属性的元素）

<div class="c1">
    <div James="123">123</div>
    <div James="456">456</div>
</div>

> $(‘div[James]‘)
< [<div james=?"123">?123?</div>?, <div james=?"456">?456?</div>?]

匹配自定义属性

② [a="b"]（匹配给定的属性是某个特定值的元素）

<div class="c1">
    <div James="123">123</div>
    <div James="456">456</div>
</div>

> $(‘div[James="456"]‘)
< [<div james=?"456">?456?</div>?]

匹配自定义属性以及值

③ 其他

[attribute!=value]    匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]    匹配给定的属性是以某些值开始的元素
[attribute$=value]    匹配给定的属性是以某些值结尾的元素
[attribute*=value]    匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用

更多...

五、表单选择器

操作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>

form.html

① :input（匹配所有 input, textarea, select 和 button 元素）

> $(‘:input‘)
< [<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>?…?</select>?, <textarea>?</textarea>?, 
<button>?</button>?]

② :text（匹配所有的单行文本框）

> $(‘:text‘)
< [<input type=?"text">?]

③ :password（匹配所有密码框）

> $(‘:password‘)
< [<input type=?"password">?]

④ :radio（匹配所有单选按钮）

> $(‘:radio‘)
< [<input type=?"radio">?]

⑤ :checkbox（匹配所有复选框）

> $(‘:checkbox‘)
< [<input type=?"checkbox">?]

⑥ :submit（匹配所有提交按钮）

> (‘:submit‘)
< [<input type=?"submit">?, <button>?</button>?]

⑦ :image（匹配所有图像域）

> $(‘:image‘)
< [<input type=?"image">?]

⑧ :reset（匹配所有重置按钮）

> $(‘:reset‘)
< [<input type=?"reset">?]

⑨ :button（匹配所有按钮）

(‘:button‘)
[<input type=?"button">?, <button>?</button>?]

⑩ :file（匹配所有文件域）

> $(‘:file‘)
< [<input type=?"file">?]

六、表单对象属性

① :enabled（匹配所有可编辑元素）

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

> $("input:enabled")
< [<input name="id" />]

匹配可编辑元素

② :disabled（匹配所有不可编辑元素）

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

> $("input:disabled")
< [<input name="email" disabled="disabled" />]

匹配不可编辑元素

③ :checked（匹配所有选中的被选中元素）

<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>

> $("input:checked")
< [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, 
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]

匹配选中的input框

④ :selected（匹配所有选中的option元素）

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

> $("select option:selected")
< [<option value="2" selected="selected">Gardens</option>]

匹配选中的select下拉框

jQuery筛选器

一、查找

① next（紧邻的同级下一个元素）

<p>Hello</p>
<span>Hello Again</span>
<div>
    <span>And Again</span>
</div>

> $("p").next()
< [<span>?Hello Again?</span>?]

同级下一个

② prev（紧邻的同级上一个元素）

<p>Hello</p>
<span>Hello Again</span>
<div>
    <span>And Again</span>
</div>

> $("div").prev()
< [<span>?Hello Again?</span>?]

同级上一个

③ parent（匹配元素的唯一父元素）　

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

> $("p").parent()
< [<div>?<p>?Hello?</p>?<p>?Hello?</p>?</div>?]

上一级父元素

④ children（匹配元素所有子元素的元素集合）

<div>
    <p>Hello</p>
    <span>
         <p>Hello</p>
    </span>
</div>

> $("div").children()
< [<p>?Hello?</p>?, <span>?<p>?Hello?</p>?</span>?]

所有子元素集合

⑤ siblings（匹配元素所有同级元素的元素集合）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

> $("span").siblings()
< [<p>?Hello?</p>?, <p>?Hello?</p>?]

同级所有

⑥ find（搜索所有与指定表达式匹配的元素）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

> ("div").find(‘span‘)
< [<span>?Hello Again?</span>?]

集合中检索指定元素

⑦ 其他

closest    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
nextAll    查找当前元素之后所有的同辈元素
nextUntil    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent    返回第一个匹配元素用于定位的父节点
parents    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
parentsUntil    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
prevAll    查找当前元素之前所有的同辈元素
prevUntil    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
siblings    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

更多...

二、过滤

① hasClass（检查当前的元素是否含有某个特定的类，如果有，则返回true）

# 给包含有某个类的元素进行一个动画

<div class="protected"></div><div></div>

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
})

判断是否有特定的类

② 其他

eq        获取当前链式操作中第N个jQuery对象，返回jQuery对象
first        获取第一个元素
last        获取最后个元素
filter        筛选出与指定表达式匹配的元素集合
is        根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map        将一组元素转换成其他数组（不论是否是元素数组）
has        保留包含特定后代的元素，去掉那些不含有指定后代的元素
not        从匹配元素的集合中删除与指定表达式匹配的元素
slice        选取一个匹配的子集

更多...

jQuery属性

一、HTML代码/文本/值

① html（获取和设置匹配元素的内容）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

# 获取数据
> $(‘span‘).html()
< "Hello Again"

# 更改数据
> $(‘span‘).html(‘<p>James</p>‘)
< [<span>?<p>?James?</p>?</span>?]

html获取和设置内容

② text（获取和设置匹配元素的内容）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

# 获取数据
> $(‘span‘).text()
< "Hello Again"

# 更改数据
> $(‘span‘).text(‘<p>James</p>‘)
< [<span>?<p>James</p>?</span>?]
> $(‘span‘).text()
< "<p>James</p>"

#此时的p是个字符而不是标签

text获取和设置内容

③ val（获取和设置input框中的内容）　　

<input name="James" type="text" value="默认值"/>

# 获取input框中的内容
> $(‘input‘).val()
< "默认值"

# 重设input框中的内容
> $(‘input‘).val(‘新输入的值‘)
< [<input name=?"James" type=?"text" value=?"默认值">?]
> $(‘input‘).val()
< "新输入的值"

获取和设置input框中内容

二、CSS

① addClass（为每个匹配的元素添加指定的类名）

<div>
    <span>And Again</span>
</div>

> $(‘span‘).addClass(‘James‘)
< [<span class=?"James">?And Again?</span>?]

添加class

② removeClass（从所有匹配的元素中删除全部或者指定的类）

<div>
    <span class="James">And Again</span>
</div>

> $(‘span‘).removeClass(‘James‘)
< [<span class>?And Again?</span>?]

删除class

③ toggleClass（如果存在就删除、不存在就添加）

<div>
    <span class="James">And Again</span>
</div>

> (‘span‘).toggleClass(‘James‘)
< [<span class>?And Again?</span>?]
> $(‘span‘).toggleClass(‘James‘)
> [<span class=?"James">?And Again?</span>?]

自动切换

三、属性

① attr（设置或返回自定义属性值）

<input id="i1" type="button" value="开关" />

# 获取值
> $(‘#i1‘).attr(‘type‘)
< "button"
> $(‘#i1‘).attr(‘value‘)
< "开关"
> $(‘#i1‘).attr(‘id‘)
< "i1"

# 设置值
> $(‘#i1‘).attr(‘name‘,‘James‘)
< [<input id=?"i1" type=?"button" value=?"开关" name=?"James">?]

针对自定义属性

② removeAttr（删除自定义属性）

<input id="i1" type="button" value="开关" name=“James”/>

> $(‘#i1‘)
< [<input id=?"i1" type=?"button" value=?"开关" name=?"James">?]
> $(‘#i1‘).removeAttr(‘name‘)
< [<input id=?"i1" type=?"button" value=?"开关">?]

删除属性

③ prop（专门用于checkbox，radio）

<input id="i1" type="checkbox" checked="checked" />

# 判断
> (‘input:checkbox‘).prop(‘checked‘)
< true

# 设置
> $(‘input:checkbox‘).prop(‘checked‘,false)
< [<input id=?"i1" type=?"checkbox" checked=?"checked">?]
> $(‘input:checkbox‘).prop(‘checked‘)
< false

# 禁用
> $(‘input:checkbox‘).prop(‘disabled‘)
< false
> $(‘input:checkbox‘).prop(‘disabled‘,true)
< [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?]

判断、设置和禁用

④ removeProp（用来删除由.prop()方法设置的属性集）

<input id="i1" type="checkbox" checked="checked" />

> $(‘input:checkbox‘).prop(‘disabled‘,true)
< [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?]
> $(‘input:checkbox‘).removeProp(‘disabled‘)
< [<input id=?"i1" type=?"checkbox" checked=?"checked">?]

删除prop设置的属性

jQuery文档处理

一、内部添加

① append（向每个匹配的元素内部追加内容）

内部最后追加

② prepend（向每个匹配的元素内部前置内容）

<div class="d1">
    <p>第一行</p>
</div>

> $("div").prepend("<p>第零行</p>");
< [<div class=?"d1">?<p>?第零行?</p>?<p>?第一行?</p>?</div>?]

内部最前插入

二、外部添加

① after（在每个匹配的元素之后插入内容）

<div class="d1">
    <p>第一行</p>
</div>

> $("div").after("<div>下面另起一行</div>");
< [<div class=?"d1">?<p>?第一行?</p>?</div>?]
> $("div")
< [<div class=?"d1">?<p>?第一行?</p>?</div>?, <div>?下面另起一行?</div>?]

同级下面添加

② before（在每个匹配的元素之前插入内容）

<div class="d1">
    <p>第一行</p>
</div>

> $("div").before("<div>上面另起一行</div>");
< [<div class=?"d1">?<p>?第一行?</p>?</div>?]
> $("div")
< [<div>?上面另起一行?</div>?, <div class=?"d1">?<p>?第一行?</p>?</div>?]

同级上面添加

三、删除

① empty（删除匹配的元素集合中内容不删除标签）

<div class="d1">
    <p>第一行</p>
</div>

> $("p").empty();
< [<p>?</p>?]
> $("div")
< [<div class=?"d1">?<p>?</p>?</div>?]

清空内容不含标签

② remove（删除匹配的元素集合包括标签）

<div class="d1">
    <p>第一行</p>
</div>

> $("p").remove();
< [<p>?第一行?</p>?]
> $("div")
< [<div class=?"d1">?</div>?]

清空内容含标签

四、复制

① clone（克隆匹配的DOM元素并且选中这些克隆的副本）

<div class="d1">
    <b>第零行</b>
    <p>第一行</p>
</div>

> $("b").clone().insertBefore("p");
< [<b>?第零行?</b>?]
> $("div")
< [<div class=?"d1">?<b>?第零行?</b>?<b>?第零行?</b>?<p>?第一行?</p>?</div>?]

克隆

jQuery CSS

一、css

① css（获取和设置匹配元素的样式属性）

<div>
    <span>And Again</span>
</div>

# 获取样式值
> $(‘span‘).css(‘color‘)
< "rgb(0, 0, 0)"

# 设置样式值
> $(‘span‘).css(‘color‘,‘red‘)
< [<span style=?"color:? red;?">?And Again?</span>?]
> $(‘span‘).css({‘color‘:‘#dddddd‘,‘background‘:‘blue‘})
< [<span style=?"color:? red;?">?And Again?</span>?]
> $(‘span‘)
< [<span style=?"color:? rgb(221, 221, 221)?;? background:? blue;?">?And Again?</span>?]

获取和设置样式属性

二、位置

① offset（获取和设置匹配元素在整个html的相对坐标）

<div id="i1"></div>
    <div style="height: 100px;width:100px;overflow: auto">
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    </div>
<div id="i2"></div>
<div style="height: 1000px;"></div>

# 获取偏移量
> $(‘#i2‘).offset()
< Object {top: 108, left: 8}
> $(‘#i2‘).offset().top
< 108
> $(‘#i2‘).offset().left
< 8
> $(‘#i2‘).offset({top:100,left:300})
< [<div id=?"i2" style=?"position:? relative;? top:? -8px;? left:? 292px;?> ">?</div>?]
< $(‘#i2‘).offset()
> Object {top: 100, left: 300}

获取和设置相对坐标

② position（获取匹配元素相对父元素的坐标）

<div style="height: 200px">000</div>
<div style="position: relative">
    <div style="height: 100px">123</div>
    <div id="i1" style="position: absolute">456</div>
</div>

> $(‘#i1‘).position()
< Object {top: 100, left: 0}
> $(‘#i1‘).position().top
< 100

获取相对父元素的坐标

③ scrollTop（获取和设置滚动条到顶部的坐标）

<div style="height: 100px;width:100px;overflow: auto">
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div style="height: 1000px;"></div>

# 获取滚动条坐标
> $(window).scrollTop()
< 0
> $(‘div‘).scrollTop()
< 424

# 设置滚动条坐标
> $(window).scrollTop(200)
< [Window]
> $(window).scrollTop()
< 200

滚动条到顶部的坐标

④ scrollLeft（获取和设置滚动条到左侧的坐标）

<div style="height: 100px;width:100px;overflow: auto">
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div style="height: 1000px;width: 2000px"></div>

# 获取
> $(window).scrollLeft()
< 0
# 设置
> $(window).scrollLeft(300)
< [Window]
> $(window).scrollLeft()
< 300

滚动条到左侧的坐标

三、尺寸

jQuery事件

一、事件处理

① on（在选择元素上绑定一个或多个事件的事件处理函数）

# 点击p标签打印标签内容

$("p").on("click", function(){
alert( $(this).text() );
});

② off（off方法移除用on绑定的事件处理程序）

# 移出on绑定的事件

$("p").off()

③ bind（为每个匹配元素的特定事件绑定事件处理函数）

# 点击p标签打印标签内容

$("p").bind("click", function(){
  alert( $(this).text() );
});

二、事件委派

① delegate（指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数）

#使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）--关键

# 当点击div的button标签时，隐藏或显示 p 元素
div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

② undelegat（删除由 delegate() 方法添加的一个或多个事件处理程序）

# 从p元素删除由 delegate() 方法添加的所有事件处理器

$("p").undelegate();

三、事件

① click（给元素绑定事件，点击触发函数调用执行）

# 所有的p标签点击后隐藏

$("p").click( function () { $(this).hide(); });

jQuery练习

1、选择框全选、取消以及反选（反选用到了三种方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <input type="button" value="反选" onclick="reversAll();"/>

        <thead>
            <tr>
                <td>选项</td>
                <td>IP</td>
                <td>端口</td>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input  type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input  type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        /*全选 把选择框设置成true*/
        function checkAll() {
            $(‘#tb :checkbox‘).prop(‘checked‘,true);
        }

        /*取消 把选择框设置成false*/
        function cancleAll() {
            $(‘#tb :checkbox‘).prop(‘checked‘,false);
        }

        /*反选 利用DOM的this.checked进行判断和赋值*/
        function reversAll() {
            $(‘#tb :checkbox‘).each(function (k) {
                //k当索引
                if(this.checked){
                    this.checked=false;
                }else {
                    this.checked=true;
                }
            })
        }

        /*反选 利用jQuery当$(this).prop(‘checked‘)时表示判断，括号里添加false和true时表示设置*/
        function reversAll() {
            $(‘#tb :checkbox‘).each(function (k) {
                //k当索引
                if($(this).prop(‘checked‘)){
                    $(this).prop(‘checked‘,false)
                }else {
                    $(this).prop(‘checked‘,true)
                }
            })
        }

         /*反选 三元运算 var v=条件？真值：假值*/
        function reversAll() {
            $(‘#tb :checkbox‘).each(function (k) {
                //k当索引
                var v = $(this).prop(‘checked‘) ? false : true;
                $(this).prop(‘checked‘,v)
            })
        }

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

选择框.html

2、两行代码搞定菜单栏（点击展开、其他关闭）　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.item .header‘).click(function () {
            $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)
        })
    </script>
</body>
</html>

菜单栏.html

3、模态对话框以及资产管理页面雏形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" onclick="addElement();"/>

    <table border="1">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement() {
            $(‘.modal,.shadow‘).removeClass(‘hide‘);
        }
        function cancelModal() {
            $(‘.modal,.shadow‘).addClass(‘hide‘);
            $(‘.modal input[type="text"]‘).val("")
        }

        $(‘.edit‘).click(function () {
            $(‘.modal,.shadow‘).removeClass(‘hide‘);
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                var n = $(this).attr("target");
                var text = $(this).text();
                $(‘.modal input[name="‘+n+‘"]‘).val(text)
            })
        })

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

资产管理页.html

4、点击开灯关灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">假装现在有效果了</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#i1‘).click(function () {
            /* 第一种方法
            if($(‘.c1‘).hasClass(‘hide‘)){
                $(‘.c1‘).removeClass(‘hide‘)
            }else {
                $(‘.c1‘).addClass(‘hide‘)
            }   */
            $(‘.c1‘).toggleClass(‘hide‘)
        })
    </script>
</body>
</html>

电源按钮.html

备注：利用toggleClass()

5、升级版菜单栏-购物商场点击不同的菜单显示不同的内容

① 菜单和内容设置对应的自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.menu-item‘).click(function () {
            $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
            var target = $(this).attr(‘a‘);
            $(‘.content‘).children(‘[b="‘+target+‘"]‘).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        })


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

升级版菜单栏.html

② 不设置对应的属性，直接用索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.menu-item‘).click(function () {
            $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
            $(‘.content‘).children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        })
    </script>
</body>
</html>

索引菜单栏.html

6、添加、删除、复制列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />
    <input id="a2" type="button" value="删除" />
    <input id="a3" type="button" value="复制" />

    <ul id="u1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#a1‘).click(function () {
            var v = $(‘#t1‘).val();
            var temp = "<li>" + v + "</li>";
            $(‘#u1‘).append(temp);
        })

        $(‘#a2‘).click(function () {
            var index = $(‘#t1‘).val();
            $(‘#u1 li‘).eq(index).remove();
        })

        $(‘#a3‘).click(function () {
            var index = $(‘#t1‘).val();
            var v = $(‘#u1 li‘).eq(index).clone();
            console.log(v[0]);
            $(‘#u1‘).append(v);
        })
    </script>
</body>
</html>

增删复制.html

7、模态对话框完善删除和添加功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        $(‘.del‘).click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement(‘tr‘);
            var td1 = document.createElement(‘td‘);
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement(‘td‘);
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $(‘#tb‘).append(tr);

            $(".modal,.shadow").addClass(‘hide‘);
//            $(‘.modal input[type="text"]‘).each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

        function  addElement() {
            $(".modal,.shadow").removeClass(‘hide‘);
        }
        function cancelModal() {
            $(".modal,.shadow").addClass(‘hide‘);
            $(‘.modal input[type="text"]‘).val("");
        }

        $(‘.edit‘).click(function(){
            $(".modal,.shadow").removeClass(‘hide‘);
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr(‘target‘);
                // 获取td中的内容
                var text = $(this).text();
                var a1 = ‘.modal input[name="‘;
                var a2 = ‘"]‘;
                var temp = a1 + n + a2;
                $(temp).val(text);
            });


//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $(‘.modal input[name="hostname"]‘).val(host);
//            $(‘.modal input[name="port"]‘).val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value

        });
    </script>
</body>
</html>

完善版资产管理页.html

8、抽屉网点赞动态效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘.item‘).click(function () {
            addFavor(this);
        })
        function addFavor(self) {
            var fontSize = 15;
            var top = 0;
            var right= 0;
            var opacity = 1;

            var tag = document.createElement(‘span‘);
            $(tag).text(‘+1‘);
            $(tag).css(‘color‘,‘green‘);
            $(tag).css(‘position‘,‘absolute‘);
            $(tag).css(‘fontSize‘,fontSize + ‘px‘);
            $(tag).css(‘right‘,right + ‘px‘);
            $(tag).css(‘top‘,top + ‘px‘);
            $(tag).css(‘opacity‘,opacity + ‘px‘);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css(‘fontSize‘,fontSize + ‘px‘);
                $(tag).css(‘right‘,right + ‘px‘);
                $(tag).css(‘top‘,top + ‘px‘);
                $(tag).css(‘opacity‘,opacity);
                if(opacity < 0 ){
                    clearInterval(obj);
                    $(tag).remove();
                }

            },40);
        }
    </script>
</body>
</html>

点赞.html

备注：利用CSS和定时器

9、做个可以随鼠标移动的条框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $(‘#title‘).mouseover(function(){
            $(this).css(‘cursor‘,‘move‘);
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(‘#title‘).on(‘mousemove‘, function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css(‘left‘,x+‘px‘);
                $(this).parent().css(‘top‘,y+‘px‘);

            })
        });
        $("#title").mouseup(function(){
            $("#title").off(‘mousemove‘);
        });
    })
</script>
</body>
</html>

拖拽框.html

10、事件委派delegate练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#a1‘).click(function () {
            var v = $(‘#t1‘).val();
            var temp = "<li>" + v + "</li>";
            $(‘#u1‘).append(temp);
        });
        // 新添加的li不能执行
//        $(‘ul li‘).click(function () {
//            var v = $(this).text();
//            alert(v);
//        })
        // 新添加的li不能执行
//        $(‘ul li‘).bind(‘click‘,function () {
//            var v = $(this).text();
//            alert(v);
//        })
        // 新添加的li不能执行
//        $(‘ul li‘).on(‘click‘, function () {
//            var v = $(this).text();
//            alert(v);
//        })

        // 新添加的li能执行
        $(‘ul‘).delegate(‘li‘,‘click‘,function () {
            var v = $(this).text();
            alert(v);
        })

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

delegate绑定未来元素.html

11、多事件绑定执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()" href="https://home.cnblogs.com/u/lianzhilei/">走你1</a>

    <a id="i1" href="http://https://home.cnblogs.com/u/lianzhilei/">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;
        }
        $(‘#i1‘).click(function () {
            alert(456);
            return false;
        })
    </script>
</body>
</html>

click绑定多个事件.html

12、登录表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用户名" type="text" /></div>
        <div><input name="n2" tex = "密码" type="password" /></div>
        <div><input name="n3" tex = "邮箱" type="text" /></div>
        <div><input name="n4" tex = "端口" type="text" /></div>
        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 当页面框架加载完毕后，自动执行
//        $(function(){
//            $.Login(‘#f1‘)
//        });
//
        $(function(){
            // 当页面所有元素完全加载完毕后，执行
            $(‘:submit‘).click(function () {

                $(‘.error‘).remove();
                var flag = true;
                $(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
                    var v = $(this).val();
                    var n = $(this).attr(‘tex‘);

                    if(v.length <= 0){
                        flag = false;
                        var tag = document.createElement(‘span‘);
                        tag.className = "error";
                        tag.innerHTML = n + "必填";
                        $(this).after(tag);
                        // return false;
                    }
                });
                return flag;

        });
        });

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

表单验证.html

Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html

参考文档-》》jQuery API 中文在线手册

Python开发【前端】：jQuery

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Python开发【前端】：jQuery