jQuery 学习入门篇附实例代码

2020-05-23 06:00:54易采站长站整理

<input type=”button” name=”head2″ id=”head2″ value=”appendTo” >
<div name=”ccc” id=”ccc” >看这里的变化</div>
//appendTo():把所有匹配的元素追加到另一个、指定的元素元素集合中,即增加子节点
//append():为某元素增加子节点

7, demo7:–表格隔行变色, 鼠标滑过变色,点击变色.
代码解释:
例子中我已经把 解释放上去了,这里就不再贴注释了。
例子中用了:mouseover(),addClass(),mouseout(),removeClass(),click(),
toggleClass(),tr:even 等方法。
另外解释了toggle()和toggleClass()的区别。
另外这个例子 我用了 链式操作 .可以查看 链式操作.txt 里面有解释。
8,demo8:–toggle( )的用法:
$(“p”).toggle()//切换元素的可见状态,但要注意此处对所有p有影响,也可以是切换两个方法toggle( Function even, Function odd ) 。
9,demo9:–hover()的用法:
Hover(function over ,function out )//模仿悬停事件
$(“#orderedlist tr”).hover(function over ,function out ) //为某表格所有行加上
10,demo10:– $ 也可以用 jQuery代替
$(document).ready(function(){// 你的代码});//中的$ 也可以用 jQuery代替
jQuery(document).ready(function(){
jQuery(“.”).click(function(){jQuery(this).toggleClass(“”)})
});//好处是有可能你会用其他的js库也会用到$, 有可能会冲突,jQuery代替$是比较安全的写法。
还有就是:
$(document).ready(function(){// 你的代码});//的缩写法:$(function() {// 你的代码});

11,demo11:–each—find的用法
$(“#orderedlist”).find(“li”).each(function(i) {})
// find(“li”)找出所有li元素,each()对集合中的每个对象执行方法
//each( Function 函数 fn要执行的函数 )以每一个匹配的元素作为上下文来执行一个函数
12,demo12:–parents()的用法:
$(this).parents(“p”).addClass(“highlight”);//往上最近的某标签
this.parent()//指该对象的父节点
13,demo13:–load()的用法:
$(“#feeds”).load(“FAQ1.html”,function() { alert(“load is done”);}
<div id=”feeds”></div>
//从远程的一个文件中载入HTML并且将它注入到DOM中
14,demo14:–next的用法:
.next()//获取的是该对象下一个兄弟节点
打包下载地址 jQuery 新手入门学习实例代码集