txf2004

jQuery 操作DOM

一、访问元素

在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。

1、元素属性操作

在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。

1.1、获取元素的属性

获取元素属性的语法格式如下：

attr(name)

其中，参数name表示属性的名称。

示例通过attr(name)方法获取元素的属性

#======================================================================== # FileName: demo6.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-09 14:12:43 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>获取元素的属性</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> body{ font-size:12px;} div{ float:left; padding-left:10px;} img{ border:solid 1px #ccc; padding:3px; float:left;} </style> <script type="text/javascript" charset="utf-8"> $(function() { var strAlt = $("img").attr("src"); strAlt += "<br/><br/>" + $("img").attr("title"); $("#divAlt").html(strAlt); }) </script> </head> <body> <img src="logo.jpg" alt="这是我的头像" title="这是我的头像"> <div id="divAlt" class=""> </div> </body> </html>

1.2、设置元素的属性

在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：

attr(key, value)其中，参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下所示：

attr({key0:value0, key1:value1})另外，attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示：

attr(key, function(index))其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

1.3、删除元素的属性

jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：

removeAttr(name)其中，参数name为元素属性的名称。

例如，可以通过如下的代码删除标记<img>中的src属性：

$("img").removeAttr("src");

2、元素内容操作

在jQuery中，操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerHTML属性，即获取或设置元素的文本内容。二者的格式与区别如下表所示。

html()和text()方法的区别

语法格式参数说明功能描述

html() 无参数用于获取元素的HTML内容

html(val) val参数为元素的HTML内容用于设置元素的HTML内容

text() 无参数用于获取元素的文本内容

text(val) val参数为元素的文本内容用户设置元素的文本内容

说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。

示例设置或获取元素的内容

#======================================================================== # FileName: demo7.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-10 12:47:45 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>设置或获取元素的内容</title> <style type="text/css"> body { font-size:15px; text-align:center;} div {border:solid 1px #666; padding:5px; width:220px; margin:5px;} </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { var strHTML = $("#divShow").html(); //获取HTML内容 var strText = $("#divShow").text(); //获取文本内容 $("#divHTML").html(strHTML); //设置HTML内容 $("#divText").text(strText); //设置文本内容 }) </script> </head> <body> <div id="divShow" class=""> <b><i>Write Less Do More</i></b> </div> <div id="divHTML" class=""> </div> <div id="divText" class=""> </div> </body> </html>

3、获取或设置元素值

在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：

val(val)其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于获取或设置对象的值。

另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式如下所示：

val().join(",")
示例设置或获取元素的值

#======================================================================== # FileName: demo8.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-10 13:08:01 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>设置或获取元素的值</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("select").change(function(){ var strSel = $("select").val().join(","); $("#p1").html(strSel); }) $("input").change(function() { var strTxt = $("input").val(); $("#p2").text(strTxt); }) $("input").focus(function() { $("input").val(""); }) }) </script> <style type="text/css"> body {font-size:12px; text-align:center;} div { padding:3px; margin:3px; width:120px; float:left;} #s1 { height:96px; width:85px;} .txt{ border:#666 1px solid; padding:3px;} </style> </head> <body> <div id="" class=""> <select multiple="multiple" id="s1"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> </select> <p id="p1"></p> </div> <div id="" class=""> <input type="text" id="" class="txt" name="" value=""> <p id="p2"></p> </div> </body> </html> 页面效果如下：

注意：在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。因此$(":radio").val(["radio2", "radio3"])此句代码的意思为：ID号为radio2和radio3的单选框被选中。

4、元素样式操作

在页面中，元素样式的操作包括：直接设置样式、增加CSS类别、类别切换、删除类别几部分。

4.1、直接设置元素样式值

在jQuery中，可以通过css()方法为某个指定的元素设置样式值，其语法格式如下所示：

css(name, value)其中，name为样式名称，value为样式的值。

4.2、增加CSS类别

通过addClass()方法增加元素类别的名称，其语法格式如下：

addClass(class)其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：

addClass(class0 class1 ...)

注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。

4.3、类别切换

通过toggleClass()方法切换不同的元素类别，其语法格式如下：

toggleClass(class)其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

4.4、删除类别

与增加CSS类别的addClass()方法相对应，removeClass()方法则用于删除类别，其语法格式如下：

removeClass(class)其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

如果要删除p标记是cls0的类别，可以使用如下的代码：

$("p").removeClass("cls0");注意：toggleClass()方法可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。

二、创建节点元素

我们知道，整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。

函数$()用于动态创建页面元素，其语法格式如下：

$(html)其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

var $div = $("<div title='jQuery理念'>Write Less Do More</div>"); $("body").append($div);执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery 理念”。

三、插入节点

在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。

3.1、内部插入节点方法

内部插入节点的方法如下表所示：

内部插入节点

语法格式	参数说明	功能描述
append(content)	content表示追加到目标中的内容	向所选择的元素内部插入内容
append(function(index, html))	通过function函数返回追加到目标中的内容	想所选择的元素内部插入function函数所返回的内容
appendTo(content)	content表示被追加的内容	把所选择的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的元素内部前置内容
prepend(function(index, html))	通过function函数返回插入目标元素内部前面的内容	向所选择的元素内部前置function函数所返回的内容
prependTo(content)	content表示用于选择元素的jQuery表达式	将所选择的元素前置到另一个指定的元素集合中

3.2、外部插入节点方法

外部插入节点

语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after(function)	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标元素外部前面的内容	向所选择的元素外部前面插入内容
before(function)	通过function函数返回插入目标外部前面的内容	向所选择的元素外部前面插入function函数所返回的内容
insertAfter(content)	content表示插入目标元素外部后面的内容	将所选择的元素插入另一个指定的元素外部后面
insertBefore(content)	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

四、复制节点

在页面中，有时需要将某个元素节点复制到另外一个节点后，如购物网站中购物车的设计。在传统的javaScript中，需要编写较为复杂的代码，而在jQuery中，可以通过方法clone()轻松实现，该方法的语法格式为：

clone()其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为：

clone(true);其中的参数设置为true就可以复制元素的所有事件处理。

示例复制元素节点

#======================================================================== # FileName: demo9.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-10 13:56:12 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>复制元素节点</title> <style type="text/css"> img { border:solid 1px #ccc; padding:3px; margin:5px; width:200px; height:200px;} </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img").click(function() { $(this).clone(true).appendTo("span"); }) }) </script> </head> <body> <span id="" class=""> <img src="logo.jpg" alt="封面" name="封面" /> </span> </body> </html> 页面效果如下所示：

注意：由于本示例中使用的是clone(true)方法，因此，当单击被复制的新图片时，由于它具有原图片的事务处理，因此，将在该图片的右侧出现一副通过其复制的新图片；如果使用clone()方法，那么只有单击原图片才可以复制新的图片元素，新复制的图片元素不具有任何功能。

五、替换节点

在jQuery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式分别如下：

replaceWith(content)该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。

replaceAll(selector)该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。

示例替换元素节点

#======================================================================== # FileName: demo10.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-10 14:27:24 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>替换元素节点</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("#Span1").replaceWith("<span title='replaceWith'>低调走过</span>"); $("<span title='replaceAll'>361789273@qq.com</span>").replaceAll("#Span2"); }) </script> <style type="text/css"> body { font-size:13px;} span { font-weight:bold;} p { background-color:#eee; padding:5px; width:200px;} </style> </head> <body> <p>姓名：<span id="Span1" class=""></span></p> <p>邮箱：<span id="Span2" class=""></span></p> </body> </html> 页面效果如下所示：

注意：replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。

六、包裹节点

在jQuery中，不仅可以通过方法替换元素节点，还可以根据需求包裹某个指定的节点，对节点的包裹也是DOM对象操作中很重要的一项，其与包裹节点相关的全部方法如下表所示：

包裹节点

语法格式	参数说明	功能描述
wrap(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用其他DOM元素包装起来
warp(fn)	fn参数为包裹结构的一个函数	把所有选择的元素用function函数返回的代码包裹起来
unwrap()	无参数	移除所选元素的父元素或包裹标记
warpAll(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
warpAll(elem)	elem参数用于宝藏所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
warpInner(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素的自内容（包括文本节点）用字符串代码包裹起来
warpInner(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
warpInner(fn)	fn参数为包裹结构的一个函数	把所有选择的元素的自内容（包括文本节点）用function函数返回的代码包裹起来

在上述表格中，warp(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。

七、遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后，以for循环语句，递减总长度，访问其中的某个元素，代码相对复杂；而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：

each(callback)其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0开始）；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

八、删除元素

在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供了两种可以删除元素的方法，即remove()和empty()。严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。

remove()方法的语法格式如下：

remove([expr])其中，参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。

empty()方法的语法格式如下：

empty()其功能为清空所选择的页面元素或所有的后代元素。

九、综合案例分析——数据删除和图片预览在项目中的应用

该案例的需求如下：

在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每一行的数据。
如果选中表格中某行的复选框，并单击表格下面的“删除”按钮，那么将删除其选中的行；选中“全选”复选框后，再次单击“删除”按钮时，将删除表格的全部行数据。
如果将鼠标一道表格中某行的小图片上，将在该图片的右下角出现一幅与之对应的大图片，用以实现图片预览的效果。

界面效果如下所示：

功能实现代码如下：

#======================================================================== # FileName: demo11.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-10 15:31:17 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>数据管理</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色 /*全选复选框单击事件*/ $("#chkAll").click(function() { if(this.checked) { //如果自己被选中 $("table tr td input[type=checkbox]").attr("checked", true); } else { $("table tr td input[type=checkbox]").attr("checked", false); } }) /*删除按钮单击事件*/ $("#btnDel").click(function() { var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项 if(intL!=0) { $("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) { //遍历除全选复选框外的行 if(this.checked) { //如果选中 $("table tr[id=" + this.value + "]").remove(); } }) } }) /*小图片鼠标移动事件*/ var x = 5; var y = 15; $("table tr td img").mousemove(function(e) { $("#imgTip") .attr("src", this.src) .css({"top":(e.pageY+y) + "px", "left":(e.pageX+x) + "px"}) .show(300); }) /*小图片鼠标移出事件*/ $("table tr td img").mouseout(function() { $("#imgTip").hide(); }) }) </script> <style type="text/css"> body { font-size:12px;} table { width:360px; border-collapse:collapse;} table tr th, td { border:solid 1px #666; text-align:center;} table tr td img { border:solid 1px #ccc; padding:3px; width:42px; height:60px; cursor:hand;} table tr td span { float:left; padding-left:12px;} table tr th { background-color:#eee; height:32px;} .clsImg { position:absolute; border:solid 1px #ccc; padding:3px; width:85px; height:120px; background-color:#eee; display:none;} .btn { border:#666 1px solid; padding:2px; width:50px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr=#ffffff,EndColorStr=#ECE9D8);} </style> </head> <body> <table border="0"> <tr> <th>选项</th> <th>编号</th> <th>封面</th> <th>购书人</th> <th>性别</th> <th>购书价</th> </tr> <tr id="0"> <td><input type="checkbox" id="Checkbox1" class="" name="" value="0"></td> <td>1001</td> <td><img src="logo.jpg" alt=""></td> <td>低调走过</td> <td>男</td> <td>35.60元</td> </tr> <tr id="1"> <td><input type="checkbox" id="Checkbox2" class="" name="" value="1"></td> <td>1002</td> <td><img src="logo1.jpg" alt=""></td> <td>gossipt</td> <td>女</td> <td>37.8元</td> </tr> <tr id="2"> <td><input type="checkbox" id="Checkbox3" class="" name="" value="2"></td> <td>1003</td> <td><img src="logo2.jpg" alt=""></td> <td>lowkey</td> <td>男</td> <td>45.60元</td> </tr> </table> <table border="0"> <tr> <td style="text-align:left; height:28px;"> <span id="" class=""> <input type="checkbox" id="chkAll" class="" name="" value=""> 全选 </span> <span id="" class=""> <input type="button" id="btnDel" class="btn" name="" value="删除"> </span> </td> </tr> </table> <img src="a2.jpg" alt="" id="imgTip" class="clsImg"> </body> </html>

你可能感兴趣的:(jquery)

C# 开发教程-入门基础天马3798 教程系列整理 c#开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
html 删除事件,html 事件的添加和删除列蒂齐亚 html 删除事件
jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
动态生成的html元素绑定click事件 .NET跨平台 Jquery及其组件 html jquery
第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次
前端页面实现table可拖动改变列宽牧码人 js jQuery js 表格拖动 css colResizable
此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j
关于jquery的on(“click”,function(){}),事件绑定无效微特尔普拉斯 javascript jquery
之前在做jquery时,遇到一个问题,就是我在append一个给啊标签绑定click点击事件时不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:$(self).find(".comment-action.cancel").off("click");//console.log("点击了取消回复的按钮!");$(self).find(".comment-action.cancel
（hilo）摇钱树项目梳理大胡子111
摇钱树项目用到了：1.jquery（js库）2.hilo.js(游戏框架)3.tida.js（淘宝相关api--要在淘宝中实现摇一摇功能）4.原生陀螺仪（因为要在微信中实现摇一摇功能）5.静态文件资源预加载项目组成部分：1.摇钱树2.摇一摇按钮3.树下礼包4.游戏标题5.树上的红包和金币6.音乐7.获奖记录7.活动规则（活动说明/玩法介绍）8.红包雨下落9.地上红包10.获奖/失败层11.玩法介绍
jQuery Easyui 源码分析之combo组件 90后北京程序员前端-easyui easyui之combobox
/***jQueryEasyUI1.3.1*该源码完全由压缩码翻译而来，并非网络上放出的源码，请勿索要。*/(function($){functionsetSize(target,width){varopts=$.data(target,"combo").options;varcombo=$.data(target,"combo").combo;varpanel=$.data(target,"co
jquery打包到webpack项目不cong明的亚子前端 webpack jquery javascript
入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}
通过前端实现导出生成pdf文件并下载银河小铁皮 vue 原生JS 前端 javascript vue.js
通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署一梵sheji288 java mybatis vue.js
java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
TypeScript---类型批注 Anglie
TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T
基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件练练科技 java 课程设计 mysql
基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署鸿源网络数据库 mysql java
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署源新网络 java 开发语言
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
jQuery选择器 VaporGas 前端 jquery 前端 javascript 学习
jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
Java架构师学习路线网络全息测量心得体会
(1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
AJAX实时表单验证系统三年九班蓝同学
本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
利用jQuery框架的ajax请求获取json格式的数据听海边涛声 jquery ajax json
Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
jquery加载页面的方法(页面加载完成就执行) JaosnY JQuery jquery 自动加载
转自http://www.jb51.net/article/27444.htmjquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。1、$(function(){$("#a").click(function(){//addingyourcodehere});});2、$(document).ready(functi
jquery事件上心心上
jquery事件事件函数列表：blur()元素失去焦点focus()元素获得焦点change()表单元素的值发生变化click()鼠标单击dblclick()鼠标双击mouseover()鼠标进入（进入子元素也触发）mouseout()鼠标离开（离开子元素也触发）mouseenter()鼠标进入（进入子元素不触发）mouseleave()鼠标离开（离开子元素不触发）hover()同时为mousee
node模块 weiweiweb888 前端 javascript bootstrap
模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
jQuery中的ajax通信技术的讲解盛夏绽放 jquery ajax okhttp
jQuery提供了多种方法来处理AJAX请求，这些方法简化了异步请求的创建和处理。以下是一些常用的jQueryAJAX方法及其演示：1.$.ajax()（1）解释这个方法是最基础也是最强大的AJAX方法，它可以接受一个配置对象来构建并发送HTTP请求。（2）示例：这是一个GET请求模版$.ajax({url:'https://api.example.com/data',//请求的URL地址type
记录-小程序720°VR（跳转H5页面实现）久违的小技巧小程序小程序 vr javascript
全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
HTML表格一壶浊酒.. 前端开发 html 前端
table,tr,td{border:lpxsolidsilver;}表格标题表头单元格HTMLCSSJavaScriptJQuery标准单元格合并行：rowspan在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。rowspan属性table,tr,td{border:1pxsolidsilver;}姓名:小明喜欢水果:苹果香蕉合并列：cols
前端篇—ajax wolf67 Django django js ajax
文章目录前言一、基于JS的ajax实现1.1基础1.2完整代码示例1.3应用二、JSON和JSONP2.1什么是JSON2.2JSON语法2.3应用2.4json与django交互2.5json与xml比较三、基于jQuery的ajax实现3.1基础方法3.2快捷方法用法示例四、跨域请求4.1同源机制4.2jsonp的js实现（未完成）4.3jsonp的jQuery实现4.4jsonp的ajax实
菜谱推荐系统(前台android原生,后台java,SSH,mysql) weixingliang_123 菜谱食谱 android 数据库 java 编程语言 mysql
Android菜谱推荐系统(前台android原生,后台java,SSH,mysql)(程序代码,MySQL数据库)【运行环境】MyEclipse(后台)Eclipse(前台)JDK1.7tomcat7【技术栈】JAVA,JSP,mvc,SSH,MYSQL,HTML,CSS,JAVASCRIPT,JQUERY,android原生【项目包含内容】【下载全套源码】【项目功能介绍】
【jQuery】前端八股文面试题菜鸟una 前端八股文面试题前端 jquery javascript
jQuery这个问的没有那么多，暂时我被问到的就这几个。大家可以直接订阅专栏。文章目录jQuery1.jQuery常见的方法有哪几个？2.在jQuery中，常见使用委托的事件有哪些？1）点击事件（click）2）鼠标悬停事件（mouseenter和mouseleave）3）表单提交事件（submit）4）输入框变化事件（change）3.在jQuery中，常见的鼠标事件方法有哪些？1）click（
jQuery第八章原生ajax 小涛涛啊！ jquery jquery
第八章原生ajax1：ajax的概念AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。*AJAX异步请求数据。什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着
java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档影伴设计 java 开发语言前端
java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
第三章：发送AJAX请求的几种方式 Muko_0x7d2 AJAX ajax
1.jquery发送Ajax请求1.1引进jQuery资源进入bootcdn.cn网站搜索jQuery复制script标签放到目标html文件head标签中添加跨源的属性的设置crossorigin="anonymous"1.2jQuery发送请求的四个参数：url参数（可以没有）函数响应体类型（一般为json）1.3GET请求请求类型为get参数在名称里面//1.发送GET请求$('button
多线程编程之join()方法周凡杨 java JOIN 多线程编程线程
现实生活中，有些工作是需要团队中成员依次完成的，这就涉及到了一个顺序问题。现在有T1、T2、T3三个工人，如何保证T2在T1执行完后执行，T3在T2执行完后执行？问题分析：首先问题中有三个实体，T1、T2、T3，因为是多线程编程，所以都要设计成线程类。关键是怎么保证线程能依次执行完呢？ Java实现过程如下： public class T1 implements Runnabl
java中switch的使用 bingyingao java enum break continue
java中的switch仅支持case条件仅支持int、enum两种类型。用enum的时候，不能直接写下列形式。 switch (timeType) { case ProdtransTimeTypeEnum.DAILY: break; default: br
hive having count 不能去重 daizj hive 去重 having count 计数
hive在使用having count()是，不支持去重计数 hive (default)> select imei from t_test_phonenum where ds=20150701 group by imei having count(distinct phone_num)>1 limit 10; FAILED: SemanticExcep
WebSphere对JSP的缓存周凡杨 WAS JSP 缓存
对于线网上的工程，更新JSP到WebSphere后，有时会出现修改的jsp没有起作用，特别是改变了某jsp的样式后，在页面中没看到效果，这主要就是由于websphere中缓存的缘故，这就要清除WebSphere中jsp缓存。要清除WebSphere中JSP的缓存，就要找到WAS安装后的根目录。现服务
设计模式总结朱辉辉33 java 设计模式
1.工厂模式 1.1 工厂方法模式 (由一个工厂类管理构造方法) 1.1.1普通工厂模式(一个工厂类中只有一个方法) 1.1.2多工厂模式(一个工厂类中有多个方法) 1.1.3静态工厂模式(将工厂类中的方法变成静态方法) &n
实例：供应商管理报表需求调研报告老A不折腾 finereport 报表系统报表软件信息化选型
引言随着企业集团的生产规模扩张，为支撑全球供应链管理，对于供应商的管理和采购过程的监控已经不局限于简单的交付以及价格的管理，目前采购及供应商管理各个环节的操作分别在不同的系统下进行，而各个数据源都独立存在，无法提供统一的数据支持；因此，为了实现对于数据分析以提供采购决策，建立报表体系成为必须。业务目标 1、通过报表为采购决策提供数据分析与支撑 2、对供应商进行综合评估以及管理，合理管理和
mysql 林鹤霄
转载源：http://blog.sina.com.cn/s/blog_4f925fc30100rx5l.html mysql -uroot -p ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) [root@centos var]# service mysql
Linux下多线程堆栈查看工具(pstree、ps、pstack) aigo linux
原文：http://blog.csdn.net/yfkiss/article/details/6729364 1. pstree pstree以树结构显示进程$ pstree -p work | grep adsshd(22669)---bash(22670)---ad_preprocess(4551)-+-{ad_preprocess}(4552) &n
html input与textarea 值改变事件 alxw4616 JavaScript
// 文本输入框(input) 文本域(textarea)值改变事件 // onpropertychange(IE) oninput(w3c) $('input,textarea').on('propertychange input', function(event) { console.log($(this).val()) });
String类的基本用法百合不是茶 String
字符串的用法; // 根据字节数组创建字符串 byte[] by = { 'a', 'b', 'c', 'd' }; String newByteString = new String(by); 1,length() 获取字符串的长度 &nbs
JDK1.5 Semaphore实例 bijian1013 java thread java多线程 Semaphore
Semaphore类一个计数信号量。从概念上讲，信号量维护了一个许可集合。如有必要，在许可可用前会阻塞每一个 acquire()，然后再获取该许可。每个 release() 添加一个许可，从而可能释放一个正在阻塞的获取者。但是，不使用实际的许可对象，Semaphore 只对可用许可的号码进行计数，并采取相应的行动。 S
使用GZip来压缩传输量 bijian1013 java GZip
启动GZip压缩要用到一个开源的Filter：PJL Compressing Filter。这个Filter自1.5.0开始该工程开始构建于JDK5.0，因此在JDK1.4环境下只能使用1.4.6。 PJL Compressi
【Java范型三】Java范型详解之范型类型通配符 bit1129 java
定义如下一个简单的范型类， package com.tom.lang.generics; public class Generics<T> { private T value; public Generics(T value) { this.value = value; } }
【Hadoop十二】HDFS常用命令 bit1129 hadoop
1. 修改日志文件查看器 hdfs oev -i edits_0000000000000000081-0000000000000000089 -o edits.xml cat edits.xml 修改日志文件转储为xml格式的edits.xml文件，其中每条RECORD就是一个操作事务日志 2. fsimage查看HDFS中的块信息等 &nb
怎样区别nginx中rewrite时break和last ronin47
在使用nginx配置rewrite中经常会遇到有的地方用last并不能工作，换成break就可以，其中的原理是对于根目录的理解有所区别，按我的测试结果大致是这样的。 location / { proxy_pass http://test;
java-21.中兴面试题输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等于 m bylijinnan java
import java.util.ArrayList; import java.util.List; import java.util.Stack; public class CombinationToSum { /* 第21 题 2010 年中兴面试题编程求解：输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等
eclipse svn 帐号密码修改问题开窍的石头 eclipse SVN svn帐号密码修改
问题描述： Eclipse的SVN插件Subclipse做得很好，在svn操作方面提供了很强大丰富的功能。但到目前为止，该插件对svn用户的概念极为淡薄，不但不能方便地切换用户，而且一旦用户的帐号、密码保存之后，就无法再变更了。解决思路：删除subclipse记录的帐号、密码信息，重新输入
[电子商务]传统商务活动与互联网的结合 comsci 电子商务
某一个传统名牌产品，过去销售的地点就在某些特定的地区和阶层，现在进入互联网之后，用户的数量群突然扩大了无数倍，但是，这种产品潜在的劣势也被放大了无数倍，这种销售利润与经营风险同步放大的效应，在最近几年将会频繁出现。。。。如何避免销售量和利润率增加的
java 解析 properties-使用 Properties-可以指定配置文件路径 cuityang java properties
#mq xdr.mq.url=tcp://192.168.100.15:61618; import java.io.IOException; import java.util.Properties; public class Test { String conf = "log4j.properties"; private static final
Java核心问题集锦 darrenzhu java 基础核心难点
注意，这里的参考文章基本来自Effective Java和jdk源码 1)ConcurrentModificationException 当你用for each遍历一个list时，如果你在循环主体代码中修改list中的元素，将会得到这个Exception，解决的办法是： 1)用listIterator, 它支持在遍历的过程中修改元素， 2)不用listIterator, new一个
1分钟学会Markdown语法 dcj3sjt126com markdown
markdown 简明语法基本符号 *,-,+ 3个符号效果都一样，这3个符号被称为 Markdown符号空白行表示另起一个段落 `是表示inline代码，tab是用来标记代码段，分别对应html的code，pre标签换行单一段落( <p>) 用一个空白行连续两个空格会变成一个 <br> 连续3个符号，然后是空行
Gson使用二（GsonBuilder） eksliang json gson GsonBuilder
转载请出自出处：http://eksliang.iteye.com/blog/2175473 一.概述 GsonBuilder用来定制java跟json之间的转换格式二.基本使用实体测试类：温馨提示：默认情况下@Expose注解是不起作用的,除非你用GsonBuilder创建Gson的时候调用了GsonBuilder.excludeField
报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList gundumw100 android
有一个工程，本来运行是正常的，我想把它移植到另一台PC上，结果报： java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.mobovip.bgr/com.mobovip.bgr.MainActivity}: java.lang.ClassNotFoundException: Didn't f
JavaWeb之JSP指令 ihuning javaweb
要点 JSP指令简介 page指令 include指令 JSP指令简介 JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。 JSP指令的基本语法格式： <%@ 指令属性名="
mac上编译FFmpeg跑ios 啸笑天 ffmpeg
1、下载文件：https://github.com/libav/gas-preprocessor，复制gas-preprocessor.pl到/usr/local/bin/下，修改文件权限：chmod 777 /usr/local/bin/gas-preprocessor.pl 2、安装yasm-1.2.0 curl http://www.tortall.net/projects/yasm
sql mysql oracle中字符串连接 macroli oracle sql mysql SQL Server
有的时候，我们有需要将由不同栏位获得的资料串连在一起。每一种资料库都有提供方法来达到这个目的： MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + CONCAT() 的语法如下： Mysql 中 CONCAT(字串1, 字串2, 字串3, ...): 将字串1、字串2、字串3，等字串连在一起。请注意，Oracle的CON
Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate qiaolevip 学习永无止境每天进步一点点 git 纵观千象
// 报错如下： $ git pull origin master fatal: unable to access 'https://git.xxx.com/': SSL certificate problem: unable to get local issuer ce rtificate // 原因：由于git最新版默认使用ssl安全验证，但是我们是使用的git未设
windows命令行设置wifi surfingll windows wifi 笔记本wifi
还没有讨厌无线wifi的无尽广告么，还在耐心等待它慢慢启动么教你命令行设置笔记本电脑wifi： 1、开启wifi命令 netsh wlan set hostednetwork mode=allow ssid=surf8 key=bb123456 netsh wlan start hostednetwork pause 其中pause是等待输入，可以去掉 2、
Linux（Ubuntu）下安装sysv-rc-conf wmlJava linux ubuntu sysv-rc-conf
安装：sudo apt-get install sysv-rc-conf 使用：sudo sysv-rc-conf 操作界面十分简洁，你可以用鼠标点击，也可以用键盘方向键定位，用空格键选择，用Ctrl+N翻下一页，用Ctrl+P翻上一页，用Q退出。背景知识 sysv-rc-conf是一个强大的服务管理程序，群众的意见是sysv-rc-conf比chkconf
svn切换环境，重发布应用多了javaee标签前缀 zengshaotao javaee
更换了开发环境，从杭州，改变到了上海。svn的地址肯定要切换的，切换之前需要将原svn自带的.svn文件信息删除，可手动删除，也可通过废弃原来的svn位置提示删除.svn时删除。然后就是按照最新的svn地址和规范建立相关的目录信息，再将原来的纯代码信息上传到新的环境。然后再重新检出，这样每次修改后就可以看到哪些文件被修改过，这对于增量发布的规范特别有用。检出