jquery常用操作说明

来源：互联网发布：python抓取json数据编辑：程序博客网时间：2024/06/05 08:44

jquery常用操作说明

1.如何引入jquery

要使用jQuery，我们要知道，jQuery是一个函数库，简单来讲就是一个后缀名为".js"的文件。可以在http://www.bootcdn.cn/jquery/ ，复制链接引入CDN。

2.怎么初始化

jQuery 页面加载初始化的方法有3种，页面在加载的时候都会执行脚本，应该没什么区别，主要看习惯吧，本人觉得第二种方法最好，比较简洁。

<script>    $(document).ready(function(){      alert("第一种方法。");  });</script> <script>    $(function(){     alert("第二种方法。"); });</script> <script>    jQuery(function($){     alert("第三种方法。"); });</script>

3.如何操作dom元素（新增，修改，删除）

(1)查找dom节点

无论新增，修改，删除，都是第一步查找节点。查找节点非常容易，使用选择器就能轻松完成各种查找工作。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

(2)新增

append()方法向匹配的元素内部追加内容，方法如下：$("target").append(element);例：

var str="<lititle='香蕉'>香蕉</li>";$("div").append(str);

(3)修改

一般都是修改标签中的文字内容。

$("p").text();该示例获得元素p的text文本内容。

$("p").text("重新设置的文本内容");该示例设置元素p的text文本为"重新设置的文本内容";

(4)删除

remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。例如：

$(this).remove();$(this).parent().remove();

4. 如何让元素显示或者隐藏

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){  $("p").hide();}); $("#show").click(function(){  $("p").show();});

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){  $("p").toggle();});

5.综合练习

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><style type="text/css">.mask{                   position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;                 z-index: 1; left: 0px;                 opacity:0.5; -moz-opacity:0.5;             }   .user_detail{position:relative;background:#fff;margin:100px auto;height:300px;width:300px;border:1px red solid;z-index:10;display:none;}</style></head><body><div class="add">新增</div><table width="100%" border="1" class="thistable">  <tr>    <th scope="col">ID</th>    <th scope="col">姓名</th>    <th scope="col">电话</th>    <th scope="col">操作</th>  </tr>  <tr class="user" data-id="1">    <td class="id">1</td>    <td class="name">小明</td>    <td class="mobile">12312312312</td>    <td><span data-id="1" onclick="show_user(this)">编辑</span> | <span data-id="1" onclick="delete_user(this)">删除</span></td>  </tr></table><div class="user_detail">姓名：<input type="text" class="showname" value=""><br>电话：<input type="text" class="showmobile" value=""><br><input type="hidden" class="showid" value=""><input type="button" class="save_user" value="保存"><input type="button" class="cancel_edit" value="取消"></div><div class="mask"></div></body><script type="text/javascript">$(function(){var add_index=2;var newname='';var newmobile='';$('.add').click(function(){//清除user_detail信息$('.showid').val(0);$('.showname').val('');$('.showmobile').val('');$('.user_detail').show();$(".mask").css("height",$(document).height());             $(".mask").css("width",$(document).width());      $('.mask').show();});$('.save_user').click(function(){var id=$('.showid').val();var name=$('.showname').val();var mobile=$('.showmobile').val();if(id==0){newname=name;newmobile=mobile;var str='<tr class="user" data-id="'+add_index+'">'+    '<td class="id">'+add_index+'</td>'+    '<td class="name">'+newname+'</td>'+    '<td class="mobile">'+newmobile+'</td>'+    '<td><span data-id="'+add_index+'" onclick="show_user(this)">编辑</span> | <span data-id="'+add_index+'" onclick="delete_user(this)">删除</span></td>'+'</tr>';$('.thistable').append(str);//关闭遮罩$('.cancel_edit').click();return;}$('.user').each(function(){if($(this).attr('data-id')==id){$(this).find('.name').text(name);$(this).find('.mobile').text(mobile);return false;}});//关闭遮罩$('.cancel_edit').click();});$('.cancel_edit').click(function(){$('.user_detail').hide();$('.mask').hide();});});function show_user(that){var info=$(that).parent().parent();var id=info.find('.id').text();var name=info.find('.name').text();var mobile=info.find('.mobile').text();//添加对应信息$('.showid').val(id);$('.showname').val(name);$('.showmobile').val(mobile);$('.user_detail').show();$(".mask").css("height",$(document).height());             $(".mask").css("width",$(document).width());      $('.mask').show();}function delete_user(that){$(that).parent().parent().remove();}</script></html>

0 0