《jQuery第三章》
一、使用jquery操作DOM
dom : 文档对象模型 ? ?就是HTML元素。
$() ? 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素 ? 例如$("p") $("#abc") ?$(".del")
用法2:放入一个函数，表示文档就绪函数 ? 例如 ?$(function(){代码...})
用法3:如下所示
jquery创建节点的方法如下：
1.创建节点 语法如下:
$("xxxxx"); xxx表示你要创建的dom元素 ? 例如 ?$("<p>我是p标签<p>");
此时仅仅是创建了节点.理解为是孤儿节点. ?需要将其插入到某个节点中.
例如 放入body标签中 方法div标签中等等.
? ? ? ? ? ?
插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb") ?表示将bb插入到aa内部的尾端
? ?
需求如下:
在div的尾端插入一个值为555的p标签? ? ?
1.创建一个值为555的p标签
let a = ?$("<p>555<p>");
调用方法即可
$("div").append(a);
? ? ? ? ? ?
插入方法2:prepend() 表示插入到指定元素内部的首端.
语法: $("aa").prepend("bb") ?表示将bb插入到aa内部的首端
? ? ? ? ? ?
需求如下:
在div的首端插入一个值为000的p标签
1.创建一个值为000的p标签
let a = ?$("<p>000<p>");
调用方法即可
$("div").prepend(a);
? ? ? ? ? ?
插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法: $("aa").after("bb") ?表示将bb插入到aa的后面
? ? ? ? ? ?
需求如下:
在111的后面插入一个1.5 1.5 1.5
1.创建一个值为000的p标签
let a = ?$("<p>1.5 1.5 1.5<p>");
调用方法即可
$("p:eq(0)").after(a);
? ? ? ? ? ?
插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法: $("aa").before("bb") ?表示将bb插入到aa的前面
? ? ? ? ? ?
需求如下:
在333的前面插入一个2.5 2.5 2.5
1.创建一个值为2.5 2.5 2.5的p标签
let a = ?$("<p>2.5 2.5 2.5<p>");
调用方法即可
$("p:eq(2)").before(a);
? ? ? ? ? ?
上述的方法 可以实现 在任意位置创建新的节点.
? ? ? ? ? ?
下述的方法 可以实现 删除任意位置的节点:
? ? ? ? ? ?
方法1: ?remove()
语法如下: ?$("xx").remove(); ?将xx元素彻底删除 ?不仅删除了值 而且删除了标签 ?
? ? ? ? ? ?
需求如下: 将444的p标签删除
$("p:eq(3)").remove();
? ? ? ? ? ?
方法2: ?empty() ?清空
语法如下: ?$("xx").empty(); ?将xx元素删除值 但是不删除标签 ?
? ? ? ? ? ?
需求如下: 将444的p标签删除
$("p:eq(3)").empty();
? ? ? ? ? ?
方法3: ?clone()? 克隆节点
语法: ?$("xxx").clone(); ?将xxx元素复制一份
注意事项:上一步仅仅只是复制 ? 此时理解为孤儿节点. 任然需要通过append ?prepend ?after ?before进行粘贴
二、show和hide方法?
$("xx").hide();隐藏XX元素
$("xx").show();显示XX元素
$("xx").toggle();来回切换：显示或隐藏XX元素
三、addClass()和removeClass()方法?
$("xx").addClass("a");给元素添加类名为a
$("xx").removeClass("aa);给元素移除类名为a
四、?如何获取当前元素
$(this);获取当前的元素
| <!DOCTYPE html> <html> ? ? <head> ? ? ? ? <meta charset="utf-8"> ? ? ? ? <title></title> ? ? </head> ? ? <body> ? ? ? ? <button>按钮1</button> ? ? ? ? <button>按钮2</button> ? ? ? ? <button>按钮3</button> ? ? ? ? <button>按钮4</button> ? ? ? ? <button>按钮5</button> ? ? ? ? <button>按钮6</button> ? ? ? ? <button>按钮7</button> ? ? ? ? ? ? ? ? <script src="js/jquery.js"></script> ? ? ? ? <script> ? ? ? ? ? ? ? ? ? ? ? ? //$("xx").index();返回当前元素在兄弟中下标 ? ? ? ? ? ? ? ? ? ? ? ? $("button").click(function(){ ? ? ? ? ? ? ? ? // $(this);获取当前的元素 ? ? ? ? ? ? ? ? alert( ?$(this).index() ?) ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? </script> ? ? </body> </html> |
五、?each方法
each方法的语法: ? $("xx").each( ? function(){ ?代码体 ? } ? );
遍历xx元素.每遍历一次 ?就执行一次代码体
| <!DOCTYPE html> <html> ? ? <head> ? ? ? ? <meta charset="utf-8"> ? ? ? ? <title></title> ? ? </head> ? ? <body> ? ? ? ? ? ? ? ? <p></p> ? ? ? ? <p></p> ? ? ? ? <p></p> ? ? ? ? <p></p> ? ? ? ? <p></p> ? ? ? ? ? ? ? ? <script src="js/jquery.js"></script> ? ? ? ? <script> ? ? ? ? ? ? ? ? ? ? ? ? //each方法的语法: ? $("xx").each( ? function(){ ?代码体 ? } ? ); ? ? ? ? ? ? //遍历xx元素.每遍历一次 ?就执行一次代码体. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //这种写法 较为局限 但是也很重要 ? ? ? ? ? ? ? // $("p").text("你好"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"] ? ? ? ? ? ? ? ? ? ? ? ? $("p").each(function(){ ? ? ? ? ? ? ? ? $(this).text( ?arr[$(this).index()] ? ); ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? </script> ? ? </body> </html> |
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ??
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！