Jquery-----JS的函数包，直接来调用方法。

一、基本知识

用法：把jquery-1.7.2.js直接复制到要做的网站项目中，拖拽引用和JS用法一样。

二、选择器

【1】基本：

1、取ID：var b= $("#div1");

var a = document.getElementById('div1'); 和 var b= $("#div1");是一样的

2、取class：$(".div");

3、取标签：$("div");    直接打标记名

【2】组合：

1、并列取：用逗号 隔开

2、后代取：用空格 隔开

【3】过滤选择器：

1、基本过滤：

.首: $(".div:first").css("background-color","red");

.尾: $(".div:last").css("background-color","red");

.取任意一个（等于）：$(".div:eq(2)").css("background-color","red");   2表示索引

.大于：$(".div:gt(2)").css("background-color","red");

.小于：$(".div:lt(2)").css("background-color","red");

.排除：$(".div:not(.div:eq(2))").css("background-color","red");   :not(选择器)

.奇：$(".div:odd").css("background-color","red");

.偶：$(".div:even").css("background-color","red");

2、属性过滤：

.属性名过滤：$(".div[id]").css("background-color","red");

.属性名值的过滤：[属性名=值]            [属性名!=值]

3、内容过滤：

.文字：$(".div:contains('a')").css("background-color","red");

.子元素：$(".div:has("选择器")").css("background-color","red");

三、事件：

【常规事件】

1、单击：

$(".div").click(function () {
alert('aaa');
});

2、双击：

$(".div").dblclick(function () {
alert('aaa');
});

3、复合事件：

●hover(function(){},function(){});

列如：做光棒效果

$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "white");
});

●toggle(function(){},function(){},........);点击事件循环执行

可以 用来点击换图片，最后一个function(){}  不加逗号

$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "black");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "red");
});

●未来元素：对象.live("事件名",function(){});

【事件冒泡】阻止事件冒泡

$(".aaa").click(function () {
alert($(this).attr("id"));
return false;//阻止 
});

四、DOM操作

【操作内容】

1、表单元素：

取值：var s=$("选择器").val()

赋值：$("选择器").val("值")

2、非表单元素：

取值：var s=$("选择器").html(), var s=$("选择器").text()

赋值：$("选择器").html("内容"), var s=$("选择器").text()

  <script type="text/javascript">

        $(document).ready(function () {      如果要放到head里必须写这条，一个页面只有一个

            $("#a").click(function () {

                $(this).text("bbbb");    点击aaaaa替换成bbbb

            });

            $("#btn1").click(function () {  点击按钮替换成bbbb

                $("#txt").val("aaaaaa");

                $(this).val("aaaaaa");

            });

        });

</script>

</head>

<body>

    <form id="form1" runat="server">

   <a id="a">aaaaa</a>

        <input type="text" id="txt" />

        <input type="button" value="btn1" id="btn1" />

    </form>

【操作属性】

1、获取属性

var s=$("选择器").attr("属性名")

2、设置属性

$("选择器").attr("属性名","属性值")

3、删除属性

$("选择器").removeAttr("属性名")

【操作样式】

1、操作内联样式

获取样式：var s=$("选择器").css("样式名")

设置样式：$("选择器").css("样式名","值")

2、操作样式表的class

添加class:$("选择器").addClass("class名")

移除class:$("选择器").removeClass("class名")

添加移除交替class:$("选择器").toggleClass("class名")

【操作相关元素】

1、查找

父、前辈：parent()、parents()

子、后代：children(选择器)-子级，find(选择器)-后代

<script type="text/javascript">
$("#div4").click(function () {
var p = $(this).parent().parent();
alert(p.attr("id"));
});
$("#div1").click(function () {
var p = $(this).children("#div3");
alert(p.attr("id"));
});
</script>

兄弟：

prev（）上一个

prevAll(选择器)

next()  后面的一个元素

nextAll(选择器)  后面兄弟级的元素

<script type="text/javascript">

$("#div4").click(function () {
var p = $(this).prevAll("#div1");
alert(p.attr("id"));
});
</script>

2、操作：

新建：$("HTML字符串")

添加：appen(jquery对象) 内部添加，after(...)下部平级添加， before("...") 上部平级添加

移除：remove() 移除元素，  empty()  清空内部全部元素

复制：clone()

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<style type="text/css">

        #boss {

        position:relative;

        width:%;

        height:600px;

        left:%;

        background-color:#e0e0e0;

        }

        #top {

        position:relative;

        width:%;

        left:%;

        height:%;

        background-color:#0ff;

        overflow:hidden;/*超出部分隐藏*/

        }

        #txt1 {

        position:relative;

        width:%;

        height:%;

        }

        #bottom {

        position:relative;

         width:%;

        left:%;

        height:%;

        background-color:#ffd800;

        overflow:auto;/*出现滚动条*/

        }

        .item {

        position:relative;

        width:%;

        left:%;

       margin-top:10px;/*间距*/

        background-color:#00ff21;

        }

        .item_top {

        position:relative;

        width:%;

        height:30px;

        left:%;

        line-height:30px;/*字的行高*/

        border-bottom:1px solid black;/*底部加一条横实线*/

        }

        .item_txt {

         position:relative;

        width:%;

        left:%;

         word-break:break-all;/*文字内容自动换行*/

        }

        .item_bottom {

         position:relative;

        width:%;

        height:30px;

        left:%;

        line-height:30px;/*字的行高*/

        text-align:right;/*字在右边*/

        border-top:1px solid black;/*上部加一条横实线*/

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="boss">

<div id="top">

    <textarea id="txt1"></textarea>

    <input type="button" id="btn1" value="提交" />

</div>

        <div id="bottom">

           <%-- <div class="item">

                <div class="item_top">aaaaaa</div>

                <div class="item_txt">wddddd</div>

                <div class="item_bottom">

                    --

                    <input type="button" value="删除" />

                </div>

            </div>--%>

        </div>

    </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $("#btn1").click(function () {

        var otxt = $("#txt1").val();/*点击按钮取出txt1*/

        var aa="<div class=\"item\">";

        aa+="<div class=\"item_top\">aaaaaa</div><div class=\"item_txt\">";

        aa+=otxt;

        aa+="</div><div class=\"item_bottom\">";

        aa+="2016-10-19 <input type=\"button\" value=\"删除\"class=\"btn_del\" /></div></div>";

        // $("#bottom").append(aa);/*追加在下面*/

        if ($(".item").length <= ) {/*打开一条也不显示，那取出追加上*/

            $("#bottom").append(aa);

        }

        else {

            $(".item").eq().before(aa);/*如果有追加在第一个的上面*/

        }

    });

    $(".btn_del").live("click",function () {/*删除*/

        $(this).parent().parent(). remove();/*清空*/

    });

</script>

Jquery--JS的函数包的更多相关文章

  1. 转载 jQuery和js自定义函数和文件的方法（全网最全）

    jQuery和js自定义函数和文件的方法(全网最全)    版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...

  2. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  3. JS入口函数和JQuery入口函数

    首先,讲一下它们的区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. (2)JQuery入口函数是在所有标签加载完之后,就会去执行. ...

  4. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  5. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  6. 详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...

  7. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  8. 详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON() —（转）

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...

  9. 详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()【转】【补】

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...

随机推荐

  1. 公用表表达式（CTE）递归的生成帮助数据

    本文的作者辛苦了,版权问题特声明本文出处:http://www.cnblogs.com/wy123/p/5960825.html 工作有时候会需要一些帮助数据,必须需要连续的数字,连续间隔的时间点,连 ...

  2. 【DNS】简单聊聊DNS如何工作

    随便聊聊 我们知道,网络上传输的数据包是一层一层的包起来的,典型的是mac地址层,ip层,tcp/udp层,应用层数据 这么几个层,那用户在浏览器中打开www.baidu.com数据包如何传到baid ...

  3. 【zz】MIT牛人解说数学体系

    作者:林达华 一.为什么要深入数学的世界 作为计算机的学生,我(原作者)没有任何企图要成为一个数学家.我学习数学的目 的,是要想爬上巨人的肩膀,希望站在更高的高度,能把我自己研究的东西看得更深广一些. ...

  4. 使用Java的Timer处理周期性任务

    package timer; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; ...

  5. (document).height()与$(window).height()

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  6. 彻底解决rman恢复碰到ora-01152错

    说说碰到这个问题的背景.使用NBU调脚本对oracle进行备份.脚本如下:RUN {ALLOCATE CHANNEL ch00 TYPE 'SBT_TAPE';ALLOCATE CHANNEL ch0 ...

  7. VS 远程调试之 “The visual studio remote debugger does not support this edition of windows”

    The error message "The visual studio remote debugger does not support this edition of windows&q ...

  8. Xilinx FPGA全局时钟和全局时钟资源的使用方法

    对FPGA的全局时钟了解不多,遂转载一篇文档: http://xilinx.eetop.cn/?action-viewnews-itemid-42 目前,大型设计一般推荐使用同步时序电路.同步时序电路 ...

  9. HTML元素事件

    事件触发模型 简要说明 onclick 鼠标单击链接 ondbclick 鼠标双击链接 onmousedown 鼠标在链接的位置按下 onmmouseout 鼠标移出链接所在的位置 onmouseov ...

  10. OpenCV2.3.1在Win7+VS2010下的配置过程(转)

    转自:http://blog.csdn.net/mygis2005/article/details/10472717 这篇博客很好的解决了我遇到的问题,所以转到自己的博客里,方便以后进行查阅. 1．  ...