1.编写简单的Jquery代码
$(documnet).ready(function(){ //等待dom元素加载完毕
alert("hello world!")
})
Jquery对象和DOM对象的相互转换
jquery对象转换成dom对象：
DOM对象转化JQuery对象
解决Jquery和其他库的冲突
选择器
1.1基本选择器
Id选择器:
$(“#one”).css(“bcakground”,”red”);
类选择器:
$(“.mimn”).css(“background”,”red”);
标签选择器:
$(“div”).css(“background”,”red”);
通配符选择器:
$(“*”)..css(“background”,”red”);
组合选择器:
$(“span”,”#one”).css(“background”,”red”);
总结:
JQuery中的基本选择器:
ID选择器 类选择器 标签选择器 通配符选择器 群组选择器
$("#id"); $(".className"); $("div"); $("*"); $("h2,h3,.cc");
1.2层次选择器
选择body内的所有div元素:
$(“body div”).css(“background”,”red”)
在body内选择子元素是div的
$("body > div").css("background","red");
Id为one 的下一个兄弟元素:
$("#one + div").css("background","red");
id为two的元素后面的所有div兄弟元素:
$(“#one ~ div”).css("background","red");
层次选择器:从父子关系和兄弟关系来进行选择页面节点
$("a b"); :a节点的所有后代节点b都被选中
$("a > b"); :a节点的所有子节点b都被选中
$("a + b"); :a节点之后的第一个兄弟节点b
$("a ~ b"); :a节点之后的所有兄弟节点b
1.3过滤选择器
1.1.1 基本过滤选择器
选择第一个DIV元素
$(“div : first”).css("background","red");
选择最后一个div元素
$("div:last").css("background","red");
选择class不为one的所有div元素
$("div:not(.one)").css("background","red");
选择索引值为偶数的div元素 even:偶数 odd:奇数
$("div:even").css("background","red");
选择索引值为奇数的div元素
$("div:odd").css("background","red");
选择索引值等于3的元素
$("div:eq(3)").css("background","red");
选择索引值大于3的元素
$("div:gt(3)").css("background","red");
选择索引值小于3的元素
$("div:lt(3)").css("background","red");
选择所有的标题元素
$(":header").css("background","red");
选择当前正在执行动画的所有元素
$(":animated").css("background","red");
基本过滤选择器:
从位置的角度来对页面的标签进行过滤选择
$("tagName:first");
$("tagName:last");
$("tagName:eq(2)");
$("tagName:gt(2)");
$("tagName:lt(2)");
$("tagName:odd");
$("tagName:even");
$(":header");
$(":animated");
$("tagName:not(.one)")
1.1.2 内容过滤选择器
选取含有文本"di"的div元素
$("div:contains('di')").css("background","red");
选取不包含子元素(或者文本元素)的div空元素.
$("div:empty").css("background","red");
选取含有class为mini元素 的div元素. $("tagName:has(.mini)")
1.选中的是DIV元素 2.子元素中的class值为mini
$("div:has(.mini)").css("background","red");
选取含有子元素(或者文本元素)的div元素.
$("div:parent").css("background","red");
内容过滤选择器总结:节点值是否为空,节点上的文本中是否包含指定的字符串,子元素中的class值是否为指定的值
$("tagName:empty");
$("tagName:parent");
$("tagName:contains('aaa')");
$("tagName:has(.one)");
1.1.3 属性过滤选择器:
选取含有属性title的div元素.
$("div[title]").css("background","red");
选取属性title值等于test的div元素.
$("div[title='test']").css("background","red");
选取属性title值不等于test的div元素.
$("div[title!='test']").css("background","red");
选取属性title值以te开始 的div元素.
$("div[title^='te']").css("background","red");
选取属性title值以est结束的div元素.
$("div[title$='est']").css("background","red");
选取属性title值含有es的div元素.
$("div[title*='es']").css("background","red");
组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$("div[id][title*='es']").css("background","red");
属性过滤选择器:从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤
$("tagName:[id]");
$("tagName:[id='cc']");
$("tagName:[id!='cc']");
$("tagName:[title^='cc']");
$("tagName:[title$='cc']");
$("tagName:[title*='cc']");
$("tagName:[title*='cc'][name='ee'][id!='ff']");
1.1.4 可见性过滤选择性:
选中所有可见的div元素 $("div:visible"),设置样式;
$("div:visible").css("background","blue");
1.选中不可见的所有元素 $("body :hidden").lenth;
2.选中不可见的DIV元素 $("div:hidden");
3.选中所有不可见的文本隐藏域 $("input:hidden")
4.让所有不可见的DIV元素3秒内显示并且设置其为背景色$dm.show(3000).css("background","red");
选中body元素下看不到的元素,包含隐藏表单组件 ,这里有空格，代表层次选择器
alert($("body :hidden").length);
alert($("div:hidden").length);
alert($("input:hidden").length);
所有不可见的div元素在3秒内显示
$("div:hidden").show(3000);
可见性选择器:根据页面上的元素是否显示来选择节点
$("tagName:visible");
$("tagName:hidden");
$("tagName :hidden"); 选中标签tagName下所有隐藏的元素,包括隐藏表单组件slow normal fast
1.1.5 元素过滤选择器
选取class为one的div下的第2个子元素
$("div.one :nth-child(2)").css("background","blue");
选取class为one的div下的第1个子元素
$("div.one :first-child").css("background","blue");
选取每个父元素下的最后一个子元素
$("div.one :last-child").css("background","blue");
如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$("div.one :only-child").css("background","blue");
子元素过滤选择器:选择父元素下的子元素(第1个,最后1个,唯一的一个,第几个子元素)
$("tagName :first-child"); $("tagName :last-child");
$("tagName :only-child"); $("tagName :nth-child(2)");
1.1.6 表单对象属性过滤选择器
选中所有可用元素 $("input:enabled")
$("input:enabled").val("AAA");
选中所有不可用元素 $("input:disabled")
$("input:disabled").val("BBB");
总结:从表单组件的可用还是不可用来进行选择节点
1.4表单选择器
选中页面上的2个按钮<input type="button"/> <button>
alert($("#form1 :button").length);
选中表单下的<button>
alert($("#form1 button").html("AAA"));
alert($("#form1 :checkbox").length);
$("#form1 :checkbox:eq(0)").attr("checked","true");
选中id为form1的表单小的input开头的组件
alert($("#form1 input").length);
选中id为form1下的所有表单组件 包括textarea button select
alert($("#form1 :input").length);
选中id为form1表单下的所有不可见元素
alert($("#form1 :hidden").length);