转换:
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 $().方法
我们通常用扩展的时候都会用自执行函数,封装变量;