1、有关页面元素引用
通过jquery$引用元素包括通过id、、元素名以及元素层级关系及dom或者xpath条件等思路方法且返回对象为jquery对象(集合对象)不能直接dom定义思路方法
2、jQuery对象和dom对象转换
只有jquery对象才能使用jquery定义思路方法注意dom对象和jquery对象是有区别思路方法时要注意操作是dom对象还是jquery对象
普通dom对象般可以通过$转换成jquery对象
如:$(document.getElementById(”msg”))则为jquery对象可以使用jquery思路方法
由于jquery对象本身是个集合所以如果jquery对象要转换为dom对象则必须取出其中某项般可通过索引取出
如:$(”#msg”)[0]$(”div”).eq(1)[0]$(”div”).get[1]$(”td”)[5]这些都是dom对象可以使用dom中思路方法但不能再使用Jquery思路方法
以下几种写法都是正确:
$(”#msg”).html;
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;
3、如何获取jQuery集合某项
对于获取元素集合获取其中某项(通过索引指定)可以使用eq或get(n)思路方法或者索引号获取要注意eq返回是jquery对象而get(n)和索引返回是dom元素对象对于jquery对象只能使用jquery思路方法而dom对象只能使用dom思路方法如要获取第 3个
元素内容有如下两种思路方法:
$(”div”).eq(2).html; //jquery对象思路方法
$(”div”).get(2).innerHTML; //dom思路方法属性
4、同实现和get
Jquery中很多思路方法都是如此主要包括如下几个:
$(”#msg”).html; //返回id为msg元素节点html内容
$(”#msg”).html(” content“);
//将“ content” 作为html串写入id为msg元素节点内容中,页面显示粗体 content
$(”#msg”).text; //返回id为msg元素节点文本内容
$(”#msg”).text(” content“);
//将“ content” 作为普通文本串写入id为msg元素节点内容中,页面显示 content
$(”#msg”).height; //返回id为msg元素高度
$(”#msg”).height(”300″); //将id为msg元素高度设为300
$(”#msg”).width; //返回id为msg元素宽度
$(”#msg”).width(”300″); //将id为msg元素宽度设为300
$(”input”).val(”); //返回表单输入框value值
$(”input”).val(”test”); //将表单输入框value值设为test
$(”#msg”).click; //触发id为msg元素单击事件
$(”#msg”).click(fn); //为id为msg元素单击事件添加
同样blur,focus,select,submit事件都可以有着两种思路方法
5、集合处理功能
对于jquery返回集合内容无需我们自己循环遍历并对每个对象分别做处理jquery已经为我们提供很方便思路方法进行集合处理
包括两种形式:
$(”p”).each(function(i){this.style.color=['#f00′,'#0f0′,'#00f'][ i ]})
//为索引分别为012p元素分别设定区别字体颜色
$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格隔行换色效果
$(”p”).click(function{alert($(this).html)})
//为每个p元素增加了click事件单击某个p元素则弹出其内容
6、扩展我们需要功能
$.extend({
min: function(a, b){ a < b?a:b; },
max: function(a, b){ a > b?a:b; }
}); //为jquery扩展了min,max两个思路方法
使用扩展思路方法(通过“$.思路方法名”):
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持思路方法连写
所谓连写即可以对个jquery对象连续各种区别思路方法
例如:
$(”p”).click(function{alert($(this).html)})
.mouseover(function{alert('mouse over event')})
.each(function(i){this.style.color=['#f00′,'#0f0′,'#00f'][ i ]});
8、操作元素样式
主要包括以下几种方式:
$(”#msg”).css(”background”); //返回元素背景颜色
$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值对形式设定样式
$(”#msg”).addClass(”select”); //为元素增加名称为select
$(”#msg”).removeClass(”select”); //删除元素名称为select
$(”#msg”).toggleClass(”select”); //如果存在(不存在)就删除(添加)名称为select