python学习之路7 前端学习4 jQuery 学习
转换：
jquery 对象[0] => Dom对象
$(Dom 对象 ) => jquery 对象
1.id
$("#id")
2.class
$(".cn")
3.获取标签中的所有有A标签
$('a')
4.获取多个标签的集合
$("a,.cn.#in")
5.层级
$("#in a") id为n的所有a标签
$("#in>a") 儿子层级
6.索引
$("#i10 a:eq(2)") id为i10的 索引值为2的a标签
还有就是 ：first / :last
7.筛选属性
$('[alex]')
$("[alex=value]")
简写 ： $(" :value")
8.在标签中设置disabled可以设置成不可编辑
$(" :disabled") => 可以找到所有disabled的标签
9.小实例:多选与反选
<body>
<input type="button" value="全选" onclick="checkAll1();">
<input type="button" value="反选" onclick="reverseAll1();">
<input type="button" value="取消" onclick="cancelAll1();">
<table border="1">
<thead>
<tr>
<th>
头
</th>
<th>
中
</th>
<th>
尾巴
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" > </td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll1(){
$(":checkbox").prop("checked",true);
}
function reverseAll1(){
$(":checkbox").each(function(){
// var v= (this.checked)?false:true;
// this.checked=v;
var v=$(this).prop("checked")?false:true;
$(this).prop("checked",v);
})
}
function cancelAll1(){
$(":checkbox").prop("checked",false);
}
</script>
</body>
10.筛选器
$(this).next() 下一个
.nextAll()
.nextUntil()
$(this).prev() 上一个
$(this).parent() 父
.parents() 祖宗都找出来
.parentsUntil 直到某个祖宗
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
jQuery支持链式编程，在一行代码中执行多个功能！
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
11. 文本操作
纯文本：
$( ).text() #获取文本内容
$( ).text(“a")#设置文本内容
带标签：
$( ).html() #获取文本内容
$( ).html(“标签")#设置文本内容
$().val() 获取value
$().val("a") shevalue
$(this).index(); //获取当前该值在里面的索引
添加内容：
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
// $('#u1').append(temp);
$('#u1').prepend(temp);
// $('#u1').after(temp) //下一级
// $('#u1').before(temp) //上一级
});
删除
$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
鼠标变成小手指
cursor: pointer;
复制
var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v);
直接的样式添加：
css处理
$().css("样式名字"，"样式值”）
点赞显示的小实例：
我们可以针对这个div给一个滑轮
在css中，overflow:auto 进行添加
获取当前窗口的滑轮高度
$().scrollTop() // 可以在scrollTop中赋值进行位置的移动；
offset 指定标签在html中的坐标； //$().offset();
position 指定标签在父标签的坐标；
$() .height() #纯高度 不包括边界
$().innerHeight() #获取边框加上纯高度
$().innerHeight() #外边距
$().innerHeight(true) #内边距
事件绑定
$().bind("click",function(){})
$().unbind("click",function(){})
$().delegate("a","click",function(){}) //对某个标签下的所有子标签绑定
同样也有undelegate
$().on("click",function(){})
$().off("click",function(){})
//当框架加载完成之后进行操作
$(function(){})
jquery扩展的两种方式：
$.fn.extend({ "hanyang": function () { return 'db'; } }); var v = $('#i1').hanyang(); alert(v); $.extend({ 'wangsen': function () { return 'sb'; } }); var v = $.wangsen(); alert(v);
jQuery 扩展
-$.extend $.方法
- $.fn.extend $().方法
我们通常用扩展的时候都会用自执行函数，封装变量；
