jQuery基础
一、jQuery对象和DOM对象的转换：
Jq转换为dom对象： jquery对象[0] ==========> Dom对象
DOM对象转换为jquery对象： 在dom前加$---> Dom对象 => $(Dom对象)
二、查找
jQuery：
选择器，直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
4. 组合a
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子
6. 基本
:first 获取匹配的第一个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li:first');
结果:
[ <li>list item 1</li> ]
:last 获取匹配的最后个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li:last')
结果:
[ <li>list item 5</li> ]
:eq(index) index从 0 开始计数
HTML 代码:
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery 代码: 查找第二行
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]
7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
实例：
多选，反选，全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM对象，当前循环的元素 $(this) jquery对象
})
- var v = 条件 ? 真值 : 假值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){
// this,代指当前循环的每一个元素
// Dom
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/
// 三元运算var v = 条件? 真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
8、筛选：
next([expr]):
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
expr: 用于筛选的表达式
a.找到每个段落的后面紧邻的同辈元素。
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
b.找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next(".selected"）
结果:
[ <p class="selected">Hello Again</p> ]
nextAll([expr])
查找当前元素之后所有的同辈元素。
可以用表达式过滤
expr: 用来过滤的表达式
a.给第一个div之后的所有元素加个类
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:first").nextAll().addClass("after");
结果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
nextUntil([exp|ele][,fil]):
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。
expr: 用于筛选祖先元素的表达式。
filter: 一个字符串，其中包含一个选择表达式匹配元素。
element: 用于筛选祖先元素的DOM元素。
filter: 一个字符串，其中包含一个选择表达式匹配元素。
a.给#term-2后面直到dt前的元素加上红色背景
HTML 代码:
<dl> <dt id="term-1" >term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term-2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt id="term-3" >term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl>
jQuery 代码:
$('#term-2').nextUntil('dt').css('background-color', 'red');
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");
parent([expr])：
取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。
a.查找每个段落的父元素
HTML 代码:
<div><p>Hello</p><p>Hello</p></div>
jQuery 代码:
$("p").parent()
结果:
[ <div><p>Hello</p><p>Hello</p></div>]
b.查找段落的父元素中每个类名为selected的父元素。
HTML 代码:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
jQuery 代码:
$("p").parent(".selected")
结果:
[ <div class="selected"><p>Hello Again</p></div> ]
parents([expr]):
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
a.找到每个span元素的所有祖先元素。
HTML 代码:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
jQuery 代码:
$("span").parents()
b.找到每个span的所有是p元素的祖先元素。
jQuery 代码:
$("span").parents("p")
parentsUntil([expr|element][,filter]):
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。
参数：
expr: 用于筛选祖先元素的表达式
filter: 一个字符串，其中包含一个选择表达式匹配元素。
element:用于筛选祖先元素的DOM元素
filter: 一个字符串，其中包含一个选择表达式匹配元素。
示例：查找item-a的祖先，但不包括level-1
HTML 代码:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
jQuery 代码:
$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');
children([expr])：
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
a.查找DIV中的每个子元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").children()
结果: [ <span>Hello Again</span> ]
b.在每个div中查找 .selected 的类。
HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代码:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
siblings([expr]):
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
a.找到每个div的所有同辈元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").siblings()
结果:
[ <p>Hello</p>, <p>And Again</p> ]
b.找到每个div的所有同辈元素中带有类名为selected的元素。
HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
jQuery 代码:
$("div").siblings(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
find():
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
a.从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
eq(index|-index):
获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
类似的有get(index),不过get(index)返回的是DOM对象。
a.获取匹配的第二个元素
HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(1)
结果:
[ <p> So is this</p> ]
b. 获取匹配的倒数第二个元素
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(-2)
结果:
[ <p> This is just a test.</p> ]
注：$('p:eq(1)') <=======> $('p').eq(1)
first():
获取第一个元素
a.获取匹配的第一个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li').first()
结果:
[ <li>list item 1</li> ]
last():
获取最后个元素
a.获取匹配的最后个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li').last()
结果:
[ <li>list item 5</li> ]
hasClass(class):
检查当前的元素是否含有某个特定的类，如果有，则返回true。
这其实就是 is("." + class)。
a.给包含有某个类的元素进行一个动画。
HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
文本操作：
text([val|fn]):
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
a.返回p元素的文本内容。
jQuery 代码:
$('p').text();
b.设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");
c.使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
html([val|fn]):
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取
a.返回p元素的内容。
$('p').html();
b.设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
c.使用函数来设置所有匹配元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
val([val|fn|arr]):
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
a.获取文本框中的值
$("input").val();
b.设定文本框的值
$("input").val("hello world!");
c.设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
d.设定一个select和一个多选的select的值
HTML 代码:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
样式操作：
addClass(class|fn):
为每个匹配的元素添加指定的类名。
参数 :class: 一个或多个要添加到元素中的CSS类名，请用空格分开
a.为匹配的元素加上 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
b.给li加上不同的class
HTML 代码:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jQuery 代码:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass():
从所有匹配的元素中删除全部或者指定的类。
a.从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
b.删除匹配元素的所有类
$("p").removeClass();
c.删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass():
如果存在（不存在）就删除（添加）一个类。
a.为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");
b.每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
c.根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
文档处理：
append(content|fn):
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似
a.向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
prepend(content):
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式
a.向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
b.将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>
c.向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>
after(content|fn)
:在每个匹配的元素之后插入内容。
a.在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
b.在所有段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
c.在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>
before(content|fn):在每个匹配的元素之前插入内容。
a.在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
b.在所有段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
c.在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>
remove([expr]):
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
a.从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
b.从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
empty():
删除匹配的元素集合中所有的子节点。
a.把所有段落的子元素（包括文本节点）删除
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
clone([Even[,deepEven]]):
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
a.克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
b. 创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
css处理
$('t1').css('样式名称', '样式值')
a.取得第一个段落的color样式属性的值。
$("p").css("color");
b.将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
c.将所有段落字体设为红色
$("p").css("color","red");
d.逐渐增加div的大小
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
点赞示例：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
});
function AddFavor(self) {
//DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize+10;
top = top -10;
right = right - 10;
opacity = opacity - 0.1;
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
},40);
}
</script>
</body>
</html>
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div style='position:relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div>
$('#i1').height() # 获取标签的高度 纯高度
$('#i1').innerHeight() # 获取纯高度
$('#i1').outerHeight() # 获取边框 + 纯高度 =82
$('#i1').outerHeight(true) # 获取边框 + 纯高度 =82
事件
jQuery绑定事件：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
delegate绑定事件，delegate先把所有事件绑定之后再执行alert();
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v +"</li>";
$('#u1').append(temp);
})
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').on('click',function () {
// var v = $(this).text();
// alert(v);
// })
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
</script>
</body>
</html>
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行（当页面中有图片存在不容易加载时，用这个比较方便，不然需要等图片加载完成后才会有网页整个框架，示例如下）
$(function(){
$(...)
})
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="s2.html" method="get">
<div><input name="n1" tex = "用户名" type="text"/></div>
<div><input name="n2" tex = "密码" type="password"/></div>
<div><input name="n3" tex = "邮箱" type="text"/></div>
<div><input name="n4" tex = "端口" type="text"/></div>
<div><input name="n5" tex = "IP" type="text"/></div>
<input type="submit" value="提交"/>
<img src="....">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//当页面框加载完毕后，自动执行
// $(function () {
// $.Login('#f1')
// });
//当页面所有元素完全加载完毕后，执行
$(function () {
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('text');
if(v.length <=0){
flag=false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
//return false;
}
});
return flag;
});
});
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// })
</script>
</body>
</html>
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="plugin1.js"></script>
<script>
var v = $.wangsen();
alert(v);
// $('#i1').css()
// $.ajax()
// jquery扩展
// $.fn.extend({
// "hanyang": function () {
// return 'db';
// }
// });
// var v = $('#i1').hanyang();
// alert(v);
// $.extend({
// 'wangsen': function () {
// return 'sb';
// }
// });
// var v = $.wangsen();
// alert(v);
</script>
</body>
</html>
扩展模块：
/**
* Created by Administrator on 2019/4/3.
*/
$.fn.extend({
"hanyang": function () {
return 'db';
}
});
/**
* Created by Administrator on 2019/4/3.
*/
$.extend({
'wangsen': function () {
return 'sb';
}
});
浙公网安备 33010602011771号