jQuery
1.特点:
小巧
功能强
跨浏览器
插件
2.使用
实际是js文件
a) 复制js到WebRoot
b) 页面<script src="jquery.js" charset=""></script>
3.核心对象及常用方法和属性
a)名称
jQuery和$
用$找出来的对象叫jQuery对象
用document找出来的对象叫Dom对象
b)dom和jquery对象转换
jQuery对象.get(0) --->dom对象
$(dom对象)--->jQuery对象
c)jQuery对象方法
.show() 显示
.hide() 隐藏
.toggle() 显示或隐藏切换
$("div").hide();
$("#myid").show();
$(".myclass").show(100);
.size() 找到多少个对象
var n = $("div").size()
文本框赋值(value)
$("#myid").val(123);
.val()取值
层的内容.innerHTML/.innerText
$("div").html() ;
$("div").html(123);
$("div").html("<input type=button>");
$("div").text("<input type=button>");
样式 document....style.color="red"
$("div").css("color","red").css("font-size","18");
$("div").css({color:"red","font-size":18});
删除
$("div").remove(); 删除所有div
添加
父加子: $("div").append("<input button>");
$("div").append( $("#myid") );
子加父
$("input").appendTo( $("div") );
对象属性
$("input").attr("checked",true);
去首尾空格:
$.trim(字符串)
$("div").each( function(i,obj){} );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了,不要用eval});
克隆
$("div").clone();
4. 选择器
a) 类选择器
<input type=text class="myclass">
$(".myclass") 找多个
b) id选择器
<input type=text id="myid">
$("#myid") 找一个
相当于:document.getElementById("myid")
c) 标记选择器 找多个
$("div,span")
相当于document.getElementsByTagName()
d) 表单选择器
$(":text") 所有文本框
$("input[type=text][value='']")
$(":radio") 所有单选框
$(":checkbox") 所有复选框
e) 表单属性选择器
$(":checkbox:checked")或$(":checked:checkbox")
$(":checked") 找所有选中(单选框和复选框)
$(":selected") 找所有选中列表框
f) 层级选择器
父找子 d找c
$("table").find("tr") //找子孙都可以
$("table>tbody>tr") 找所有tr
$("table>tbody>tr:first") 找第一行
$("table>tbody>tr").eq(0) 找第一行
$("table>tbody>tr:odd") 所有奇数行
$("table>tbody>tr:even") 所有偶数行
子找父
$("tr").parent()
找兄弟
$(a).next() 下一个
$(b).prev() 上一个
---jQuery对表格tr的操作
function bh() //序号进行编号
{
jQuery("#t>tr").each(function(i,obj){
obj.cells[0].innerHTML=i+1;
});
}
function addRow() //添加一行tr
{
var tr = jQuery("#t>tr:first").clone().appendTo(jQuery("#t"));
tr.find(":text").val("");
tr.find("td").eq(4).html(""); //eq(4)第二个文本框
bh();
}
function droRow(del) //删除一行tr
{
jQuery(del).parent().parent().remove();
bh();
}
//计算输入文本中数字的结果
function js(js)
{
//找到tr
var tr=jQuery(js).parent().parent();
//取数
var sl=tr.find(":text").eq(1).val();
var jg=tr.find(":text").eq(2).val();
tr.find("td").eq(4).html(sl*jg);
}
分享到:
相关推荐
Jquery技术的基础详细学习笔记,总结了Jquery技术的各个知识点,可以用来复习以及对基础知识的巩固,对新人的学习很有帮助。
Jquery技术的基础详细学习笔记,总结了Jquery技术的各个知识点,可以用来复习以及对基础知识的巩固,对新人的学习很有帮助。
在尝试开始学习jQuery之前,请让自己学习JavaScript的基础:基础知识,DOM操作,事件,AJAX和异步JavaScript。 如果您还没有学习JavaScript的基础知识,那么我就制作了有关可以从中学习大部分内容的。什么是jQuery...
最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料;本资料仅用于学习。 【课程内容】 第1周 开课介绍 python发展介绍 第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if ...
内容概要:通过HTML、CSS以及JS相关知识完成品优购相关页面:...阅读建议:此资源通过四个页面的制作,将HTML、CSS以及JS的相关知识融入其中,我们在查看源代码时,可以将相关参数进行调整,从而对相关知识进行复习。
04 Python 基础知识练习题试题 第12章 01 今日内容介绍以及基础测试题答案讲解 02 Python 列表的魔法 03 Python 元组的魔法 04 Python 字典的魔法 05 Python 错误更正:布尔值可以作为字典的key 06 Python 今日...
JavaWeb每日总结思维导图,包含JavaWeb开发的多项技术,方便复习知识点使用。内容包括:MySQL、MySQL约束&多表、MySQL多表&事务、JDBC、数据库连接池、HTML、CSS、JS基础&高级、BootStrap、XML、Tomcat、Servlet&...
程序员专用刷题 布局 永久链接 ...基础知识 基本的 jQuery 知识(DOM 交互,如添加/删除元素/类等) 这些不会由讲师强制执行,但是如果您不了解这些概念,您就会迷失方向。 如果您需要复习,请查看 . 课程
基础知识 基本的 jQuery 知识(DOM 交互,如添加/删除元素/类等) 这些不会由讲师强制执行,但是如果您不了解这些概念,您就会迷失方向。 如果您需要复习,请查看 . 课程大纲 我们将深入研究 JavaS
基础知识 基本的 jQuery 知识(DOM 交互,如添加/删除元素/类等) 这些不会由讲师强制执行,但是如果您不了解这些概念,您就会迷失方向。 如果您需要复习,请查看 . 课程大纲 我们将深入研究 JavaS
基础知识 基本的 jQuery 知识(DOM 交互,如添加/删除元素/类等) 这些不会由讲师强制执行,但是如果您不了解这些概念,您就会迷失方向。 如果您需要复习,请查看 . 课程大纲 我们将深入研究 JavaScript 的细微差别...
2012-05-27 11:08 180,401 Java基础复习笔记05数据结构-栈.pdf 2012-05-27 11:05 834,613 jqueryui-API(最完整).pdf 2012-05-27 10:58 31,758,963 Linux程序设计(原书第2版).pdf 2012-05-27 11:03 2,023,736 ...
2012-05-27 11:08 180,401 Java基础复习笔记05数据结构-栈.pdf 2012-05-27 11:05 834,613 jqueryui-API(最完整).pdf 2012-05-27 10:58 31,758,963 Linux程序设计(原书第2版).pdf 2012-05-27 11:03 2,023,736 ...
2012-05-27 11:08 180,401 Java基础复习笔记05数据结构-栈.pdf 2012-05-27 11:05 834,613 jqueryui-API(最完整).pdf 2012-05-27 10:58 31,758,963 Linux程序设计(原书第2版).pdf 2012-05-27 11:03 2,023,736 ...