jquery实现各种实例
1、正反选实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<button onclick="selectall();">全选</button>
<button onclick="canselall();">取消</button>
<button onclick="reverseall();">反选</button>
<tr>
<td><input type="checkbox" value="444"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
</tr>
</table>
<script src="jquery-3.1.1.js"></script>
<script>
function selectall() {
// var abc1= $('table []');
// console.log(abc1);
$('table :checkbox').prop('checked',true);//找到table标签下面的style为checkbox的input标签，注意留空格
// var abc1=$('table :checkbox').prop('value');
// console.log(abc1);
}
function canselall() {
$('table :checkbox').prop('checked',false)
}
function reverseall() {
$('table :checkbox').each( //each表示juuery里面的循环，这里循环table标签下面的style为checkbox的input标签
// 的this表示一个个循环的元素
function () {
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
}
)
}
</script>
</body>
</html>
jquery里面另外的一种循环方式，
li=[11,22,33,55];
$.each(li,function (x,y) {
console.log(x,y)
});//这是循环的另外一种方式
效果如图
2、全选反选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{background-color: aquamarine;
height: 3000px}
.div3{
width: 60px;
height:60px;
position: fixed;
background-color: blue;
right: 1px;
bottom: 10px;
font-size: 23px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">111</div>
<div class="div3 hide" onclick="returnTop();">返回顶部</div>
<script src="jquery-3.1.1.js"></script>
<script>
window.onscroll=function () { //window.onscroll表示监听滚轮
var index = $(window).scrollTop();//每当移动滚轮则捕获离顶部的高度
// console.log(index);
if(index>50){//当距离大于50时候才显示这个返回顶部的小框框
$('.div3').removeClass('hide')
}else {$('.div3').addClass('hide')}
};
function returnTop() {
$(window).scrollTop(0)
}
</script>
</body>
</html>
3、绑定事件基础处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="c1" style="background-color: blue">
<p>hello</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$('#c1').append('<b>aaaa</b>');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部
$('<b>uuuu</b>').insertAfter('#c1');//这是外部插入
$('ul').delegate('li','click',function () {
alert('123')
});//绑定事件给标签li，每添加一条li就就自动绑定事件
$('button').click(function(){
})
</script>
</body>
</html
4、插入标签
$('#c1').append('<b>aaaa</b>');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部
$('<b>uuuu</b>').insertAfter('#c1');//这是外部插入
详细如图
5、扩展
<script>
$(function () {
jQuery.fn.extend(
{
hello:function(){
return $(this).text();//内部实际是一个for循环，取到所有的text文本
}
}
);
var index =$('.title').hello();
console.log(this);
alert(index)
});
jQuery.extend({//另外一种扩展
s1:function (arg) {
$(arg)
}
});
$.s1('.title');
$('.title').hello()
</script>
6、最后概括起来，jquery的基本用法结构
一、查找
选择器
基本选择器
id、class、tag
层级：div a .c1
组合：div，a .c1
属性：$("div[jay='abc']")
筛选器
父亲
孩子
兄弟
哥哥们
弟弟们
子子孙孙：
二、操作
整体标签：
属性：
内容
三、事件
xxxx.click
xxxx.blind('click')
xxxx.delegate('li','click',func)
四、扩展
五、ajax
