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. linux eclipse c++

    几年前使用过eclipse c++,最近两年没有怎么使用.其中细节,忘的差不多了.最近费很大劲,总算找了回来.真是好记性,不如烂笔头啊! 现在将使用过程中的一些细节,总结如下: 1.安装eclipse ...

  2. HDU 2222 关键词查找

    题目大意:给出一篇文章,长度最多1000000,若干个关键词,关键词有可能重复.关键词不超过10000,每个关键词不超过50个字符.请问该文章包含多少个关键词. 这是AC自动机的入门题.首先将关键词分 ...

  3. pt-online-schema-change 修改主键导致数据删除失败的问题调查

    pt-online-schema-change在线DDL工具可以做到DDL操作不锁表,不影响线上操作.对于线上超过100W的大表,一般情况下都用这个工具做DDL,最重要的考虑点还是“不影响线上操作” ...

  4. SearchBar 修改 cancel button 文字 及颜色

    #pragma mark - - (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{ _searchController.searchB ...

  5. 带无缝滚动的轮播图（含JS运动框架）-简洁版

    昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...

  6. Python基础语法（二）

    类中的方法定义前如果有 @staticmethod 则此方法通过类名调用,如:dict.fromkeys() : 如果没有,则此方法通过对象调用 三元运算 name=值1 if 条件 else 值2  ...

  7. 反人类的MyEclipse之-调整JavaScript代码-花括号换行显示

    然后将除最后一项外所有的都勾选为Next Line

  8. [SQL]收缩数据库日志

    SELECT NAME, recovery_model_desc FROM sys.databases --查看数据库的模式 ALTER DATABASE TOMS SET RECOVERY SIMP ...

  9. poj 1806 Manhattan 2025

    点击打开链接 题目大意就是给定一个最大歩数,让你输出你在三维的空间中可以到达的位置的切片,注意当歩数大于9的时候就不需要输出了! #include<stdio.h> #include< ...

  10. Django 后台管理设置（admin.py）

    上面是两种后台效果图,第一张是默认情况下Django的后台,第二张是稍作修改后的情况,下面记录下作了哪些修改: 代码: class ArticleAdmin(admin.ModelAdmin): li ...