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. 【MySQL】排序原理与案例分析

    前言 排序是数据库中的一个基本功能,MySQL也不例外.用户通过Order by语句即能达到将指定的结果集排序的目的,其实不仅仅是Order by语句,Group by语句,Distinct语句都会隐 ...

  2. 黄聪：C#中HtmlAgilityPack判断是否包含或不包含指定的属性或值

    //选择不包含class属性的节点 var result = node.SelectNodes(".//span[not(@class)]"); //选择不包含class和id属性 ...

  3. android-8~23 View.java - dispatchTouchEvent源码

    android-8 /** * Pass the touch screen motion event down to the target view, or this * view if it is ...

  4. Java课程

    链接: http://pan.baidu.com/s/1kU2n3wz 密码: r88d (封装,继承,多态) 1.JDK的安装和配置 2.HelloWorld 3.基本概念 4.数据类型 5.程序控 ...

  5. webpy 访问局域网共享资源

    遇到一个问题: 在python shell 中调用局域网远程共享文件时,没问题.但是在webpy中调用时,报错:没有权限.那一定是apache设置问题. 网上找不到类似的方法,于是换个思路搜了一下“p ...

  6. linux 安装beyond compare

    安装好后,在终端运行bcompare  就ok

  7. 针对WebService服务，客户端调用时报序列化的最大项数maxItemsInObjectGraph超过65536问题

    今天在使用webservice服务时候,报异常"The InnerException message was 'Maximum number of items that can be ser ...

  8. jQuery MiniUI开发系列之：UI和数据分离

    使用MiniUI需要注意:UI和数据是分离的. 传统的WEB开发,开发者经常将数据库操作.服务端业务.HTML标签写在一个页面内. 这样会造成开发的混乱,并且难以维护和升级. 使用MiniUI开发的时 ...

  9. PHP表单数据验证

    背景: 在上次项目的时候,一直不明白为什么要对数据验证,我能保证我每次请求的数据都是合法的,但是在后面的时候,原来“用户”并不是那样听话,他总是要给我们找麻烦,然后可能让我们的服务器崩掉.但是只对单个 ...

  10. ubuntu 14.04 compiz的ALT + TAB切换程序

    安装完ubuntu,发现不能使用ALT + TAB切换应用程序,翻遍所有百度结果,没有可行,都是拷这个拷那个...真实无语...FQgoogle,看的第一个就完美解决.记录下来,方便国人少走弯路. 首 ...