【jQuery】jQuery小结

来源：互联网发布：淘宝以旧换新主板骗局编辑：程序博客网时间：2024/05/20 16:32

前言

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语法

csstable 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 normalulNode.hide();//ulNode.slideToggle();

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

小结

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

0 0