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为请求成功后的回调函数,该 ...

随机推荐

[zz]谱聚类
了凡春秋USTC 谱聚类 http://chunqiu.blog.ustc.edu.cn/?p=505 最近忙着写文章,好久不写博客了.最近看到一个聚类方法--谱聚类,号称现代聚类方法,看到它简洁的公 ...
tomcat与oracle关于8080端口的冲突
http://blog.csdn.net/baidu_24256693/article/details/44863935 由于电脑里同时安装了tomcat与oracle,所以8080的端口是冲突的. ...
B2B商城网站前端开发
最近在时间很忙,在弄一个B2B商城,运用到的easyUI+javaWEB(maven)+JQuery+Scss+JavaScript+其他框架(sea.js模块化等),我负责前端这块:后期的重要的前端 ...
dubbo-admin和dubbo-monitor-simple的布署
dubbo-admin 把dubbo-admin的war包解压到tomcat或者jetty的ROOT目录下,启动就可以访问了(自己配置tomcat的端口) wget http://code.aliba ...
Android屏幕适配全攻略 (转载)
http://blog.csdn.net/jdsjlzx/article/details/45891551 https://github.com/hongyangAndroid/AndroidAuto ...
Java 如何将String转化为Int
在 Java 中要将 String 类型转化为 int 类型时,需要使用 Integer 类中的 parseInt() 方法或者 valueOf() 方法进行转换. 例1: 1 2 3 4 5 6 S ...
ubuntu14.04 JDK安装
JDK7 安装 1 sudo apt-get install openjdk-7-jdk 2 设置安装环境在/etc/profile中追加: # Java support # export JAVA ...
oracle11g dataguard 完全手册
一.前言: 网络上关于dataguard的配置文章很多,但是很多打着oracle11g的文章实际都是只能在9 10 上运行,比如FAL_CLIENT在11g中已经废弃,但是现在网络上的文章都是没有标注 ...
Shuffling Machine和双向链表
1. 双向链表 https://github.com/BodhiXing/Data_Structure 2. Shuffling Machine https://pta.patest.cn/pta/t ...
从 A/Looper: Could not create epoll instance. errno=24 错误浅谈解决各种 bug 的思路
今天代码写着写着就莫名闪退了,手机也没有“程序停止运行”的提示,logcat也没有看到蓝色的调用栈log,这样的闪退最是蛋疼了,还好必现.复现几次之后,终于从logcat中看到了一行可疑的log: A ...

Jquery--JS的函数包

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

随机推荐

热门专题