1、jQuery操作Dom
1、添加元素
<code>
<script language="JavaScript">
$().ready(function(){
$("input[type='button']").click(function(){
var $li = $("<li/>").attr("id","sh").attr("name","shanghai").text("上海");
$("#city").append($li);//把新建的元素追加到指定元素的子元素的最后
});
});
</script>
</code>
<code>
2、删除元素
<script language="JavaScript">
$().ready(function(){
$("input[type='button']").click(function(){
$("#cq").remove();
});
});
</script>
</code>
3、替换元素
<code>
<script language="JavaScript">
$("input[type='button']").click(function(){
$("button").replaceWith($("p"));
});
</script>
</code>
4、把dom对象转化成jQuery对象
<code>
<script type="text/javascript">
window.onload = function(){
把dom对象转化成jquery对象
var domObj = document.getElementById("username");//dom对象
var jQueryObj = $(domObj); //该对象就是一个jquery对象
alert(jQueryObj.attr("value"));
}
</script>
</code>
5、全选，全不选，与反选
<code>
<script type="application/javascript">
$().ready(function(){
$("#checkItems").click(function(){
if($(this).attr("checked")){//被选中
$(":checkbox[name='items']").attr("checked",true);
}else{
$(":checkbox[name='items']").attr("checked",false);
}
});
$("#checkall").click(function(){
$(":checkbox[name='items']").attr("checked",true);
$("#checkItems").attr("checked",true);
});
$("#checkallNo").click(function(){
$(":checkbox[name='items']").attr("checked",false);
$("#checkItems").attr("checked",false);
});
$("#check_revsern").click(function(){
// $(":checkbox[name='items']:checked").attr("checked",false);
// $(":checkbox[name='items']:not(:checked)").attr("checked",true);
$(":checkbox[name='items']").each(function(){
if($(this).attr("checked")){//如果被选中
$(this).attr("checked",false);
}else{//没有被选中
$(this).attr("checked",true);
}
});
});
});
</script>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
</html>
</code>
6、jquery实现选择转换
<code>
<script type="text/javascript">
$().ready(function(){
$("#add").click(function(){
$("#second").append($("#first option:selected"));
});
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
$("#remove").click(function(){
});
$("#remove_all").click(function(){
});
});
</script>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; ">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
</code>
7、jQuery实现边改，边增加
<code>
$().ready(function(){
var index = 1;
/**
* 完成添加功能
*/
$("#addUser").click(function(){
/**
* 1、获取姓名,电话,email的值
* 2、创建
* <tr>
* <td><input type="checkbox"></td>
* <td>${姓名}</td>
* <td>${email}</td>
* <td>${phone}</td>
* <td><a>修改</a></td>
* <td><a>删除</a></td>
* </tr>
* 3、把创建完成的tr追加到tbody上
*/
var name = $("#name").val();
var email = $("#email").val();
var tel = $("#tel").val();
var $checkbox = $("<input/>").attr("type","checkbox");
var $checkboxTD = $("<td/>").append($checkbox);
$checkboxTD.attr("id",index);
index++;
var $nameTD = $("<td/>").text(name);
var $emailTD = $("<td/>").text(email);
var $phoneTD = $("<td/>").text(tel);
var $updateA = $("<a/>").text("修改");
/**
* 完成修改的功能
*/
$updateA.css("cursor","pointer");
/**
* 给修改的超级链接添加click事件
*/
$updateA.click(function(){
var name = $(this).parent().siblings("td:eq(1)").text();
var email = $(this).parent().siblings("td:eq(2)").text();
var tel = $(this).parent().siblings("td:eq(3)").text();
var id = $(this).parent().siblings("td:eq(0)").attr("id");
$("#name_update").val(name);
$("#email_update").val(email);
$("#tel_update").val(tel);
$("#id_update").val(id);
});
var $updateTD = $("<td/>").append($updateA);
var $delA = $("<a/>").text("删除");
$delA.css("cursor","pointer");
$delA.click(function(){//完成删除本行的功能
if(window.confirm("您确认要删除吗?")){
$(this).parent().parent().remove();
}
});
var $delTD = $("<td/>").append($delA);
var $tr = $("<tr/>").append($checkboxTD).
append($nameTD).append($emailTD).
append($phoneTD)
.append($delTD).append($updateTD);
$("#usertable tbody").append($tr);
});
/**
* 完成删除几行的功能
*/
$("#deleteUser").click(function(){
if(window.confirm("您确认要删除吗?")){
/**
* :checkbox 所有的checkbox
* :not(#allCheckbox) 不包含id为allCheckbox
* 被选中的
*/
$(":checkbox:not(#allCheckbox):checked").parent().parent().remove();
}
});
/**
* 全选功能
*/
$("#allCheckbox").click(function(){
if($(this).attr("checked")){
$(":checkbox:not(#allCheckbox)").attr("checked",true);
}else{
$(":checkbox:not(#allCheckbox)").attr("checked",false);
}
});
/**
* 完成修改操作
*/
$("#updateUser").click(function(){
/**
* 获取到修改的id的值，根据值去匹配table中的行
*/
var idValue = $("#id_update").val();
var name_update = $("#name_update").val();
var email_update = $("#email_update").val();
var tel_update = $("#tel_update").val();
/**
* 根据修改的id的值就定位某一行(td)
*/
$("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update);
$("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);
$("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update);
});
});
</code>
html代码：
<code>
<script src="user.js"></script>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<button id="deleteUser">删除</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th><input type="checkbox" id="allCheckbox"/></th>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
<th>修改</th>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
修改用户:<br><br>
姓名: <input type="text" name="name" id="name_update" />
email: <input type="text" name="email" id="email_update" />
电话: <input type="text" name="tel" id="tel_update" /><br><br>
<input type="hidden" id="id_update"/>
<button id="updateUser">提交</button>
</center>
</body>
</html>
</code>
8、jQuery操作Dom
<code>
<script type="text/javascript">
window.onload = function(){
/**
* jquery对象是数组对象
* jquery对象不可能为null,如果得到不值，那么数组的大小为0
*/
var domObj = document.getElementById("username");//dom对象
var jQueryObj = $(domObj); //该对象就是一个jquery对象
var domObj2 = jQueryObj[0];//dom对象
var domObj3 = jQueryObj.get(0);//dom对象
alert(domObj2.getAttribute("name"));
alert(domObj3.getAttribute("name"));
}
</script>
<body>
<input type="text" name="username" id="username">
</body>
</code>
jquery还有这个方法判断是不是数字？
isInteger($("#testCaseBudget").val(), 0, 9999999999)
1、jQuery操作Dom的更多相关文章
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery权威指南（第2版） 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- *jquery操作DOM总结 (原创：最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
随机推荐
- 至强E3-1200 系列部分参数
1155 Xeon E3-1275V2(E1) Ivy Bridge 3.5GHz BLK 100MHz 8MB 77W All 1155* Xeon E3-1270V2(E1) Ivy Bridge ...
- USACO 6.5 章节 世界上本没有龙 屠龙的人多了也便有了
All Latin Squares 题目大意 n x n矩阵(n=2->7) 第一行1 2 3 4 5 ..N 每行每列,1-N各出现一次,求总方案数 题解 n最大为7 显然打表 写了个先数值后 ...
- <JAVA - 大作业（1）文本编辑器 >
<JAVA - 大作业(1)文本编辑器 > 背景 JAVA上机大作业:qq / 代码评价系统 第一次上机主题是练习JAVA自带的GUI图形化编程 目的:实现一个跟window10记事本界面 ...
- python 装饰器 第三步：使用语法糖
# 第三步:使用语法糖(就是语法) # 用于扩展基本函数的函数 def kuozhan(func): # 扩展功能1 print('饭前要洗手') # 调用基本函数 func() # 扩展功能2 pr ...
- spring cloud学习--feign
简单示例 增加feign maven依赖 <dependency> <groupId>org.springframework.cloud</groupId> < ...
- 重读ORB_SLAM之LoopClosing线程难点
1. DetectLoop 这里有个ConsistenGroup概念,比较难懂.这里是最让人迷惑的地方.一旦vbConsistentGroup为真,其他帧的spCanditateGroup就进不来了. ...
- VIM编辑器使用及插件配置
1.VIM的三种模式: 普通模式.插入模式.命令行模式2.三种模式的转换: 2.1进入普通模式 ①打开VIM默认为普通模式 ②处于插入模式/命令行模式时,按ESC进入普通模式 2.2进入插入模式: A ...
- 使用api获取数据————小程序
使用api获取数据----小程序 onLoad: function (options) { //打开页面即执行. let that = this; wx.request({ //建立链接 url: ' ...
- css识别空格回车符
新闻发布系统文字需要换行,后台返回数据包含空格.回车符号需要默认显示出来.在父元素加上css样式 :white-space:pre:即可. 例:<div class="white-sp ...
- 【转】CentOS 7.3 从下载到安装
CentOS 7.3 从下载到安装 https://blog.csdn.net/sxy2475/article/details/75194142 [百度知道]图解CentOS 7.3安装步骤 ht ...