Jquery--JS的函数包

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(选择器)-后代

兄弟：

prev（）上一个

prevAll(选择器)

next() 后面的一个元素

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

$("#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的函数包的更多相关文章

转载 jQuery和js自定义函数和文件的方法（全网最全）
jQuery和js自定义函数和文件的方法(全网最全) 版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...
JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...
JS入口函数和JQuery入口函数
首先,讲一下它们的区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. (2)JQuery入口函数是在所有标签加载完之后,就会去执行. ...
关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...
详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
详细解读Jquery各Ajax函数
$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...
详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON() —（转）
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()【转】【补】
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...

随机推荐

C＃：优惠券代码
static Random random = new Random(); List<string> generatedVouchers = new List<string>() ...
SQL分页查询
假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...
基于Spring Boot/Spring Session/Redis的分布式Session共享解决方案
分布式Web网站一般都会碰到集群session共享问题,之前也做过一些Spring3的项目,当时解决这个问题做过两种方案,一是利用nginx,session交给nginx控制,但是这个需要额外工作较多 ...
AMap公交线路查询
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
caffe.exe (caffe.bin)用法回顾
caffe.bin :command line brew usage : caffe <command><args> commands: train: 训练或者微调一个网络 ...
在shiro-cas中实现 Jasig-cas的Single Sign Out 功能
1 Single Sign Out 功能即单点登出功能.也就是在任意子系统进行登出操作后,其他子系统会自动登出. 实际CAS登出的步骤为所以每个子系统都需要实现一个sso登出响应. cas-cli ...
VS2013各个版本秘钥
Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...
JavaScript的学习3
一.数组 1.定义数组格式:var 变量名 = [数组元素1,数组元素2] 2.遍历数组元素: 格式: var arr = []; for(var i=0;i<数组长度;i++){ arr[i] ...
验证码javaweb
package cn.itcast.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; impo ...
【摘】Mysql备份还原数据库之mysqldump实例及参数详细说明
原文http://www.cnblogs.com/xuejie/archive/2013/01/11/2856911.html 我们在运营项目的过程中肯定会遇到备份数据库,还原数据库的情况,我们一 ...

Jquery--JS的函数包

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

随机推荐

热门专题