JQuery总结

jquery 一切皆方法
javascript的封装框架
不推荐JS和jquery混合使用
导入jquery <script src="相对路径"></script>
jquery包: jQuery-版本.js(源码包)(查看)
jQuery-版本-min.js(压缩代码包)(使用)
jquery中多用到回调函数

加载时语法:
$(document).ready(function() {}) 页面加载完后,window.onload前执行
$(function(){}) 页面加载完执行(window.onload)

选择器:
$("#id") id选择器
$(".class") 类选择器
$("标签"); 元素选择器
$("input[name=name]") 属性选择器
$("[name=name]") 属性选择器

返回的是都是对象(js返回的是元素或元素集合)

元素操作:
$(this) 当前元素
元素.index(); 元素的子元素下标
属性:
attr("key"); 获取属性值
attr("key","value"); 设置属性值(或者增加属性与值)
removeAttr("key"); 删除属性
addClass("value"); 增加class属性 (调用时可以传递一个函数)
removeClass("key"); 删除class属性 (删除的是class的值)
toggleClass("value"); 判断是否有class为value的,如果有就删除,如果没有就加上
html(); 得到元素内部的innerHTML(所有元素); 如果是集合调的话返回的是第一个元素
html("value"); 设置元素内部的innerHTML(所有元素);
text(); 获取元素内部的文本(所有元素的文本);
val(); 获取到文本框的值,js里面的value属性
val("value"); 设置文本框的值

添加方法:
$("<p>文本</p>"); 创建一个元素
append(元素); 为元素添加一个子元素(默认将元素放在最后)
prepend(元素); 为元素添加一个子元素(默认将元素放在最前);
子元素对象.prependTo(目标元素); 将选中的元素追加到目标元素的最前面
before(元素"<p></p>"); 在某个元素的前面追加元素
after(元素"<p></p>"); 在某个元素的后面追加元素
insertBefore(目标元素); 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
insertAfter(目标元素); 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。







empty(); 将元素内容清空(不会删除元素)
remove(); 删除元素(传参代表删除某个元素("#div1"))

clone(); 克隆元素(false(只克隆当前元素),true(将元素和事件一起克隆))

("<p></p>").replaceAll("div"); 替换页面的所有的div元素



筛选方法:
first(); 获取集合中第一个元素
last(); 获取集合中最后一个元素
eq(下标); 获取到集合中指定下标的元素(-1表示最后一个)
hasClass(); 判断当前元素是否有指定的class属性(返回boolean)
filter(".li "); 从集合中筛选出符合指定条件的元素(前面需要加上属性表达 传元素有的属性值);
has(" .li "); 找到元素的子元素中包含指定属性的元素(传子元素有的属性值,返回的还是本身)
链式表达:
find(" .li "); 找到符合条件表达式的子元素集合
parent(); 得到父元素
children(); 得到子元素
is(" .li "); 判断是否有指定属性(返回boolean)(判断元素可以直接传元素名,判断属性需要加 : )
 



循环:
对象集合.each(function(){});


事件:
1、
元素对象.on("click",function(){});
2、
元素对象.click(function(){});
hover(function(){},function(){}); 模拟鼠标移进移出的效果(第一个动作鼠标移上去的动作,第二个是移出的效果)



一个元素绑定多个事件:
on("click mouseover",function(){}); 一个元素多个事件:一种处理方式
on({ "click" : function(){} , "mouseover" : function(){} }) 一个元素多个事件:多种处理方式


元素 . off(); 移除事件(带参数是指定删除某个事件)

动态效果:
hide(); 隐藏元素(参数毫秒,多少毫秒内隐藏完成)
常量:slow mormal fast
show(); 显示元素(参数毫秒,多少毫秒内显示完成, 回调函数(){可以控制完成之后的动作})

滑动:
slideDown(); 向下滑动的方式显示(参数毫秒,多少毫秒内显示完成)
slideUp(); 向上滑动的方式隐藏(参数毫秒,多少毫秒内隐藏完成)
slideToggle(); 显示时做隐藏,隐藏时做显示(参数毫秒)

fadeIn(); 改变透明度的方式显示(参数毫秒,多少毫秒内显示完成);
fadeOut(); 改变透明度的方式隐藏(参数毫秒,多少毫秒内隐藏完成);

delay(); 设置某个动作延时执行(参数毫秒,延迟多少毫秒);








操作元素的子元素:
$("div span:first-child") 选中第一个子元素
$("#mytable tr:even") 选中子元素偶数行
$("#mytable tr:odd") 选中子元素奇数行

操作样式
css("样式key"); 得到元素的指定样式(包括外联样式和内部样式)
css("key","value"); 设置元素的样式(需要设置多个样式传一个JSON对象);
value可以写成一个function(默认给你传参n(元素下标),val(值px)){}










  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值