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. PHP 缩放图片

    class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 * $srcFile 原图像文件名称 * $toW 缩略图宽 ...

  2. Spring MVC4 纯注解配置教程

    阅读本文需要又一定的sping基础,最起码要成功的运行过一个SpringMvc项目. 在传统的Spring项目中,我们要写一堆的XML文件.而这些XML文件格式要求又很严格,很不便于开发.而网上所谓的 ...

  3. js api 实现钉钉免登

    js api 实现钉钉免登,用于从钉钉微应用跳转到企业内部的oa,erp等,我刚刚实施完了我公司的这个功能,钉钉用起来还不错. 1 js api 实现钉钉免登,页面配置. <title>利 ...

  4. [AIR] 新建窗口的方法

    有时根据需要,我们需要在AIR程序中开多个窗口window 以下新建一个窗口: var opion:NativeWindowInitOptions = new NativeWindowInitOpti ...

  5. java如何区分是form表单请求,还是ajax请求

    requestType = request.getHeader("X-Requested-With");                 if(requestType==null) ...

  6. jquery分页插件

    css代码: /*分页*/ .pageList { clear: both; overflow: hidden; } .pageList a, .pageList span { border: 1px ...

  7. "\r\n","\r","\n"

    参考: http://blog.csdn.net/xiaofei2010/article/details/8458605 '\r' : 回车符 '\n' : 换行符 以下是c++语言的测试代码, 跟平 ...

  8. 转:中间人攻击利用框架bettercap测试

    0x00前言 上篇提到内网渗透很有趣,这次就从一款新工具说起: bettercap 0x01简介 bettercap可用来实现各种中间人攻击,模块化,便携.易扩展 0x02特点 提到中间人攻击,最知名 ...

  9. 关于处理小数点位数的几个oracle函数

    1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select trunc(1.2345, 2) from ...

  10. 这些年正Android - 大学

     还记得,第一次看见小周是在大一的操场上. 她正向教学楼站着,一身白配粉的休闲上衣搭配湖蓝色的牛仔裤,穿着一双很平凡的凉鞋,手里拿着当年的Nokia 3110c,皙清的手指,素颜的站着不言不笑.现在回 ...