【jQuery】jQuery小结

本文介绍了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使它变美了,并且动起来了。主要是对表格,菜单,标签页,下拉框还有弹出框等样式,弹出或消失的动画的设计。是一个很棒的框架,省了很多事,它封装了好多方法。

评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值