【jQuery】jQuery小结

最新推荐文章于 2018-07-29 21:35:12 发布

韩丽萍

最新推荐文章于 2018-07-29 21:35:12 发布

阅读量2.6k

点赞数 1

分类专栏：【 Web前端】 ---------JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/boniesunshine/article/details/54835091

版权

【 Web前端】同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

---------JQuery

2 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本概念和用途，包括使用CSS选择器操作DOM，注册事件，与服务器交互，以及在表格和菜单等场景的应用。jQuery的核心优势在于简化DOM操作，提供强大的插件机制，实现Write less, Do more的效果。" 78018025,4881323,Python爬虫：正则表达式与BeautifulSoup结合实例,"['Python', '网络爬虫', 'BeautifulSoup', '正则表达式']

摘要由CSDN通过智能技术生成

前言

jQuery是个什么啊？是个框架。利用css选择器查找DOM对象,对其操作，操作样式或者增删方法等等。拥有强大的插件机制，可以使我们write less, do more。

细数家珍

这里写图片描述

（一）框架认识

示例：

//找到button按钮，注册事件
$("#verifyButton").click(function(){
    //1.获取文本框的内容
    var userName = $("#userName").val();
    //2.将这个内容发送给服务器端
    if(userName == ""){
    alert("用户名不能为空");
}else{
        $.get("http://127.0.0.1:8080/jQuery/UserVerify?userName=" + encodeURL(userName),null,function(response){
    //3.接受服务器端返回的数据，填充到div中
    $("#result").html(response);
})
}

});

1.$(.class).click(function(){})
给节点注册事件，选择节点用的是css选择器。
2.$(“.class”).val()
获取节点的属性。

3.$get(url,data,callback)

前台和服务器交互，前台把要调的后台地址和参数传过去，callback返回结果，返回结果是一个动作，要用function。$在这用做方法上。

4.$(.class).html(response)
给节点返回值的时候用html。

（二）表格

1.表格的html语法

<html>
  <table>
     <thead>
        <tr>
            <th>标题</th> 
        </tr>  
     </thead>
     <tbody>
        <tr>
           <th>学号</th>
           <th>姓名</th>
        </tr>
        <tr>
            <td>  </td>
            <td>  </td>
        </tr>
     </tbody>
 </table>
</html>

2.表格的css语法

css
table td{
    border:1px solid black;
    //修正单元格之间的边框不能合并
    border-collapse:collapse;
}

3.页面加载的时候表格奇数行的背景色变化，往当前选中的单元格中添加文本框

//$(function(){})相当于 $(document).ready(function(){});

$(function(){
    //奇数行颜色变化
    $("tbody tr:even").css("background-color","#ECE9D8");

    //找到所有学号的单元格
    var numTd = $("tbody td:even");
    //给这些单元格注册鼠标点击事件
    numTd.click(function(){
       //创建一个文本框
       var inputObj = $("<input type = 'text'>");
       //去掉文本框的边框
       inputObj.css("border-width","0");
       //找到当前鼠标点击的td，this对应的就是响应了click的那个td
       var tdObj = $(this);
       //讲文本框插入到td中
       inputObj.appendTo(tdObj);
       //文本框插入之后就被选中
       inputObj.trigger("focus").trigger("select");
})
})

appendTo方法是把一个节点添加到另一个节点的子节点的最后。

trigger方法出发JavaScript的某个事件发生。

4.阻止事件传递

numId.click(function(){
    //找到当前鼠标单击的td,this 对应的就是响应了click的那个ID
    var tdobj = $(this);
    if (tdobj.children("input").length > 0){
    //当前td中有input，不执行click处理
    return false;
}
});

    如果td中有文本框就不响应td的click事件。
    5.$的作用
    （1）$(function(){}) document装载完成之后触发。里面直接放方法。
     （2）里面放css选择器，找到css节点，包装成jQuery对象。
     （3）里面放dom对象直接转换成jQuery对象。
    （4）里面直接放html文本，会创建dom节点，并包装成jQuery对象。

（三）菜单

1.菜单语法

<ul>
   <li class = "main">
          <a>菜单项1</a>
       <ul>
       <li>菜单项11</li>
       <li>菜单项12</li>
       </ul>
   </li>
</ul>

2.属性

css
.main{
//取消下划线
text-decoration:none;
//背景图片
background-image:url(../images/title.gif);
background-repeat:repeat-x;
background-position:3px center;
//清除默认的小圆点
list-style:none;
}

    3. .main a 和 .main > a 的区别
    前者选择了.main这个class元素下的所有a节点；后者只选择了.main的子节点中的a节点。
    4.toggle 让显示的不显示，不显示的显示

//节点显示或隐藏可以设置速度
ulNode.show("slow");//fast normal
ulNode.hide();
//ulNode.slideToggle();

toggle的方法很强大，可以省去我们判断元素是显示还是隐藏状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。使得实现动画效果更加方便快捷，也是do more, write less的体现。

小结

对jQuery的感觉就是html是难看的而且还是死的，jQuery使它变美了，并且动起来了。主要是对表格，菜单，标签页，下拉框还有弹出框等样式，弹出或消失的动画的设计。是一个很棒的框架，省了很多事，它封装了好多方法。

韩丽萍

关注

1
点赞
踩
27

收藏

觉得还不错? 一键收藏
18
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录