$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
$("div").eq(2).get(0).innerHTML
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new
$("#msg").text(); //返回id为msg的元素节点的文本内容。
对于文本框只能用val()来获取值,而不能用text()获取
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(
function show()
{}
);
$("#msg").addClass("class") //用于添加样式 class样式已经定于了
$("#msg").removeClass("class") //用于移除样式
$(document).ready()是在DOM结构载入完后执行的,而window.onloal是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。
$("input[type='text']").each(function(i,o)
{
$("#div2").text(i);
alert($(this).val());
}); 在此方法里面,$("#div2")表示jquery对象,而$("#id").click(function(){this.**}); 则this表示DOM对象
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid1pxnavy')
.css({'width':'30px'}); 而不需要不断重复定位对象,这是jQuery的链式特点
------------------
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each([1,2,3],function(i,n)
{
alert(i+" is "+n);
})
$.trim():用来分割字符串两端的空格的
var a=[1,2]; var b=[3,4]
$.extend(a,b); ---把a的前几部分内容用b代替,此时a的内容被修改了 返回的是一个object对象
var c=$.extend({},a,b) ---a的内容不被修改 合并后的结果保存在c中,c是个数组
var a=[1,2,3];
var c=$.map(a,function(i)
{
return i>0?i+2:null;
});
改方法用来满足条件的数组元素。 返回的是一个数组对象
$("#id").attr("name",function()
{
return this.id;
});
当要设置样式时 只能用className:
$("#id").attr("className","ad");
$("#id").attr("name","hello");
批量设置:
$("#id").attr({src:"aa",name:"aa"}); 注意花括号
移除属性:
$("#id").removeAttr("name");
获取属性:
$("#id").attr("name");
$("#text").clone(true); true (Boolean) : 设置为true以便复制元素的所有事件处理
--$("#divId").html($("#text").clone(true));
对于select标签:
$("#selectId").val():获取当前选中的值
$("#selectId").val(value):设置当前选中的值 此值必须在下拉框中存在
---------------
$(“.buttonAdd”) 匹配使用了buttonAdd样式的所有元素:
$(".ad").each(function(i,o)
{
$(o).attr("name",$(o).attr("id"));
});
--------------
$("#msg").html(); 代表jquery对象
$("#msg")[0].innerHTML; 代表DOM对象
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
-------------
对于jquery 数组对象也有length属性
获取满足条件的:$("input[type=radio][checked]")
对于下拉框:$("#selectId option[selected]").text()
$("select option[selected]").text()
$("select[id='id'][name='name'] option[selected]").text()
$("#selectId").empty():用于清空下拉框
$("#selectId").append($("<option>xue</option>"));或者$("<option>xue</option>").appendTo($("#selectId))
对于单选按钮:$("#radioId").arrt("checked",true|false|"");
$("#radioId").arrt("checked","123"); --设置value为123的单选按钮选中
-------------------------
动画效果: $("Id").hide() : 掩藏掉控件
$("Id").hide("slow",function(){});
$("Id").show() 或者 $("Id").show("fase"|4000, function(){})
$("Id").toggle():如果是掩藏就显示,如果显示 则掩藏
$("Id").toggle(function(){},function(){});
$("Id").slideDown("slow",function(){}); 只能下降
$("Id").slideToggle("slow",function(){}); 可以上拉和下降
$("Id").slideUp("slow",function(){}); 只能上拉
$("Id").fadeIn("slow",function(){}); 淡入
$("Id").fadeOut("slow",function(){}); 淡入
---------------------------
方法链:
$("#Id").val("hello").addClass("ad").attr("name",function(){return this.id});
Ajax:
$("#divId").load("a.html"); 可以用来加载页面,动态页面也行 load( url, [data], [callback] )
$.ajax({
type:'POST',
url:'ajax.jsp',
data:'name=x',
success:function(msg)
{
alert(msg);
$("#ajaxId").html(msg);
}
});
------------------------
$("p").next(".selected") :用来查找下一个元素,用样式的刷选
$("p").nextAll(".selected"):用来查找后面所有的元素
$("p").find("span").each(function(){}); find指在p的节点下面进行查找,并且可以通过find("a[id=aid]")来刷选
$("p").css({color:"#000",background:"#4785"});
jquery选择器:
$("#id"):通过ID
$("a") :通过标签
$("a[id=aid][name='zhangsan']");通过属性帅选
$("ul li:first") 或者$("ul li:last"):可以用此方式来获取ul下的第一个li元素
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
$("div").eq(2).get(0).innerHTML
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new
$("#msg").text(); //返回id为msg的元素节点的文本内容。
对于文本框只能用val()来获取值,而不能用text()获取
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(
function show()
{}
);
$("#msg").addClass("class") //用于添加样式 class样式已经定于了
$("#msg").removeClass("class") //用于移除样式
$(document).ready()是在DOM结构载入完后执行的,而window.onloal是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。
$("input[type='text']").each(function(i,o)
{
$("#div2").text(i);
alert($(this).val());
}); 在此方法里面,$("#div2")表示jquery对象,而$("#id").click(function(){this.**}); 则this表示DOM对象
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid1pxnavy')
.css({'width':'30px'}); 而不需要不断重复定位对象,这是jQuery的链式特点
------------------
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each([1,2,3],function(i,n)
{
alert(i+" is "+n);
})
$.trim():用来分割字符串两端的空格的
var a=[1,2]; var b=[3,4]
$.extend(a,b); ---把a的前几部分内容用b代替,此时a的内容被修改了 返回的是一个object对象
var c=$.extend({},a,b) ---a的内容不被修改 合并后的结果保存在c中,c是个数组
var a=[1,2,3];
var c=$.map(a,function(i)
{
return i>0?i+2:null;
});
改方法用来满足条件的数组元素。 返回的是一个数组对象
$("#id").attr("name",function()
{
return this.id;
});
当要设置样式时 只能用className:
$("#id").attr("className","ad");
$("#id").attr("name","hello");
批量设置:
$("#id").attr({src:"aa",name:"aa"}); 注意花括号
移除属性:
$("#id").removeAttr("name");
获取属性:
$("#id").attr("name");
$("#text").clone(true); true (Boolean) : 设置为true以便复制元素的所有事件处理
--$("#divId").html($("#text").clone(true));
对于select标签:
$("#selectId").val():获取当前选中的值
$("#selectId").val(value):设置当前选中的值 此值必须在下拉框中存在
---------------
$(“.buttonAdd”) 匹配使用了buttonAdd样式的所有元素:
$(".ad").each(function(i,o)
{
$(o).attr("name",$(o).attr("id"));
});
--------------
$("#msg").html(); 代表jquery对象
$("#msg")[0].innerHTML; 代表DOM对象
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
-------------
对于jquery 数组对象也有length属性
获取满足条件的:$("input[type=radio][checked]")
对于下拉框:$("#selectId option[selected]").text()
$("select option[selected]").text()
$("select[id='id'][name='name'] option[selected]").text()
$("#selectId").empty():用于清空下拉框
$("#selectId").append($("<option>xue</option>"));或者$("<option>xue</option>").appendTo($("#selectId))
对于单选按钮:$("#radioId").arrt("checked",true|false|"");
$("#radioId").arrt("checked","123"); --设置value为123的单选按钮选中
-------------------------
动画效果: $("Id").hide() : 掩藏掉控件
$("Id").hide("slow",function(){});
$("Id").show() 或者 $("Id").show("fase"|4000, function(){})
$("Id").toggle():如果是掩藏就显示,如果显示 则掩藏
$("Id").toggle(function(){},function(){});
$("Id").slideDown("slow",function(){}); 只能下降
$("Id").slideToggle("slow",function(){}); 可以上拉和下降
$("Id").slideUp("slow",function(){}); 只能上拉
$("Id").fadeIn("slow",function(){}); 淡入
$("Id").fadeOut("slow",function(){}); 淡入
---------------------------
方法链:
$("#Id").val("hello").addClass("ad").attr("name",function(){return this.id});
Ajax:
$("#divId").load("a.html"); 可以用来加载页面,动态页面也行 load( url, [data], [callback] )
$.ajax({
type:'POST',
url:'ajax.jsp',
data:'name=x',
success:function(msg)
{
alert(msg);
$("#ajaxId").html(msg);
}
});
------------------------
$("p").next(".selected") :用来查找下一个元素,用样式的刷选
$("p").nextAll(".selected"):用来查找后面所有的元素
$("p").find("span").each(function(){}); find指在p的节点下面进行查找,并且可以通过find("a[id=aid]")来刷选
$("p").css({color:"#000",background:"#4785"});
jquery选择器:
$("#id"):通过ID
$("a") :通过标签
$("a[id=aid][name='zhangsan']");通过属性帅选
$("ul li:first") 或者$("ul li:last"):可以用此方式来获取ul下的第一个li元素