jquery-学习笔记1

来源：互联网发布：什么助手适用mac 编辑：程序博客网时间：2024/05/16 07:18

1.jquery:
(1)基本选择器
通过id选择对象，$("#id名称")；
通过html标记名称，$("html标记名称")
通过类名称，$(".类名称")
同时选择多个对象，$("第一个，第二个")；
选择所有的对象$("*");
(2)层级选择器--通过元素之间的关系
祖先后代 $("div li");
父子关系 $("div>li")
仅在后面兄弟关系 $("div+h2")
后面所有兄弟 $("div~h2");
选择前后所有兄弟$("div").siblings('ul').css("background","red");
(3)过滤选择器：
过滤选择器主要通过特定的过滤规则来筛选所需的dom元素，该选择器都以“：”开头；$("ul li:first").css("background","red");//选择第一个li；
$("ul li.two").css("background","#006");//选择class为two的li；
$("ul li:not(.two)").css("background","#006");//选择class不是two的li；
$("ul li:even").css("background","#096");//索引从0，1，2开始偶数行；
:eq(index)//匹配一个给定索引值的元素；
:gt(index)//匹配所有大于给定索引值的元素；
:lt(index)//匹配所有小于给定索引值的元素；
:contains(text)//匹配包含给定文本的元素；
:has(selector)//匹配含有选择器所匹配的元素的元素；
:hidden:匹配所有不可见元素，或者type为hidden的元素；
:nth-child匹配父元素下的第n歌子或奇偶元素
:input匹配所有input，textarea，select和button元素；
2.jquery操作dom:
(1)修改图片属性Demo：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
//alert($("img").attr("src"));
//点击button修改图片路径
$("img").attr("src","images/1.jpg");
})
$("img").mouseover(function(){
//鼠标over修改图片路径
$(this).attr("src","images/3.jpg");
})
})
</script>
</head>

<body>
<button>修改图片属性</button>
<img src="images/4.jpg"/>
</body>
</html>
（2）创建节点，使用jquery的工厂函数$():$(html);会根据传入的html标记字符串创建一个dom对象，并把这个dom对象包装成一个jquery对象返回；
注意：动态创建的新元素节点不会被自动添加到文档中，而是需要是哟个其他方法将其插入到文档中；当创建单个元素时，需注意闭合标签和使用标准的html格式，例如创建一个<p>元素，可以使用$("<p/>")或$("<p></p>"),但不能使用$("<p>")或者$("</p>");
创建文本节点就是在创建节点时直接把文本内容写出来，创建属性节点也是在创建元素节点时一起创建；
内部插入：
$('#btn2').click(function(){
var pic=$("<div></div>");
$("body").append(pic);
//alert("dsf");
})
append(content);
appendTo(content);
prepend(content);
prependTo(content);
外部插入：
$("ul").after($("<li>"+info+"</li>"));//在ul外部插入li；
after(content);
before(content);
insertAfter(content);
insertBefore(content);
删除节点：
remove（）；
empty();//清空节点--清空元素中的所有后代节点；
$('#btn3').click(function(){
$("ul li:last").remove();
})
复制节点：
clone();
//克隆节点，不克隆事件
$("button").clone().appendTo("p");
//克隆节点，克隆事件
$("button").clone(true).appendTo("p");

0 0