jQuery选择器、事件、节点、动画效果
一、选择器
基本选择器:
标签选择器: $("h1").css()
类选择器: $(".c").css()
id选择器: $("#id").css()
并集选择器: $("h1,.c,#id").css()
交集选择器: $("li.c").css()
层次选择器:
后代选择器: $("div li").css() " "
子选择器: $("dt>span").css() ">"
相邻选择器: $("#one>dt+dd").css() "+"
同辈选择器: $("#two>dt~dd").css() "~"
属性选择器:"[]"
包含给定属性选择器: $("a[target]").css()
包含给定特定属性值选择器: $("[href='http://www.baidu.com']").css()
不包含给定特定属性值选择器: $("[href!='http://www.baidu.com']").css()
以给定特定属性值开头选择器: $("[href^='www']").css()
以给定特定属性值结尾选择器: $("[href$='.jd']").css()
包含特定属性值选择器: $("[href*='http']").css()
复合属性选择器: $("a[href][title][target]").css()
过滤选择器:":"
选取偶数元素: $("li:even").css()
选取奇数元素: $("li:odd").css()
选取索引等于(i)的元素: $("li:eq(1)").css()
选取索引大于(i)的元素: $("li:gt(1)").css()
选取索引小于(i)的元素: $("li:lt(1)").css()
选择器反向选择元素: $("li:not(.tee)").css()
选取所有标题元素: $("div>:header").css()
选取获得焦点的元素: $(":focus").css()
二、显示与隐藏
$("h1").toggle(function(){
$("#inner:hidden").show();//显示
},function(){
$("#inner:visible").hide();//隐藏
})
三、鼠标事件
$("#nav li").mouseover(function(){
$(this).addClass("over");
})
$("#nav li").mouseout(function(){
$(this).removeClass("over");
})
四、键盘事件
keydown(): 按下键盘时,触发或将函数绑定到指定元素的keydown事件
keyup(): 释放键盘时,触发或将函数绑定到指定元素的keyup事件
keypress(): 产生可打印的字符时,触发或将函数绑定到指定元素的keypress事件
五、表单事件
focus(): 获得焦点,触发或将函数绑定到指定元素的focus事件
blur(): 失去焦点,触发或将函数绑定到指定元素的blur事件
六、绑定事件
bind(): 可以同时为多个事件绑定方法
$("input[name=enevt_1]").bind({mouseover:function(){
$("ul").css("display","none");
},mouseout:function(){
$("ul").css("display","block");
}});
七、淡入淡出效果
fadeIn():可以通过改变元素的透明度实现淡入效果
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow"); //以较慢的速度淡入
});
fadeOut():可以通过改变元素的透明度实现淡出效果
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000); //以1000毫秒的速度淡出
});
八、改变元素的高度
slideDown(): 可以使元素逐步延伸展示
slideUp(): 可以使元素逐步缩短直至隐藏
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
})
九、插入子节点
append(content) $(A).append(B):表示将B追加到A中 例如:$("ul").append($newNode1);
appendTo(content) $(A).append(B):表示将A追加到B中 例如:$newNode1.appendTo("ul");
prepend(content) $(A).prepend(B):表示将B前置到A中 例如:$("ul").prepend($newNode1);
prependTo(content) $(A).prepend(B):表示将A前置到B中 例如:$newNode1.prependTo("ul");
十、插入同辈节点
after(content) $(A).after(B): 表示将B插入到A之后 例如:$("ul").after($newNode1);
insertAfter(content) $(B).insertAfter(A): 表示将A插入到B之后 例如:$newNode1.insertAfter("ul");
before(content) $(A).before(B): 表示将B插入到A之前 例如:$("ul").before($newNode1);
insertBefore(content) $(B).insertBefore(A):表示将A插入到B之前 例如:$newNode1.insertbefore("ul");
十一、替换节点
replaceWith():替换某个节点
$("ul li:eq(1)").replaceWith($newNode1);
replaceAll(): 替换所有符合条件的节点
$("ul li:eq(1)").replaceAll($newNode1);
十二、复制节点
clone():用于复制某个节点 $("ul li:eq(1)").clone(true).appendTo("ul");
十三、删除节点
remove():删除整个节点
detach():删除整个节点,保留元素的绑定事件、附加的数据
empty(): 清空节点内容
十四、获取与设置节点属性
attr():用来获取与设置元素属性
$newNode4.attr("alt"); //设置单个属性
$("img").attr({width:"50",height:"100"}); //设置多个属性
removeAttr():用来删除元素的属性
$newNode2.removeAttr("title");
十五、遍历子元素
children():可以用来获取元素的所有子元素
$("body").children();
parent(): 获取元素的父级元素
parents():获取元素的祖先元素
next([expr]):用于获取紧邻匹配元素之后的元素
$("li:eq(1)").next().css("background-color","#F06");
prev([expr]):用于获取紧邻匹配元素之前的元素
$("li:eq(1)").prev().css("background-color","#F06");
siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素
$("li:eq(1)").siblings().css("background-color","#F06");
jQuery选择器、事件、节点、动画效果的更多相关文章
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- jquery 最简单的动画效果
<p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- jQuery中的事件和动画效果
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
- 关于JQuery(最后一点动画效果*)
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
- 第4章 jQuery的事件和动画(二)
二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
随机推荐
- PHP 数组 & 字符串处理
1:数组分割为字符串 implode 2:字符串分割为数组 explode() 3:替换字符串 eg: $a = "Hello world" str_replace(“H”,“ ...
- css3媒介查询使用规则小结
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过. 用一句话来说:使用同一套Html代码来适配不同设备和满足不同场景不同用户 ...
- JDBC连接MySQL数据库(一)——数据库的基本连接
JDBC的概念在使用之前我们先了解一下JDBC的概念, JDBC的全称是数据库连接(Java Database Connectivity),它是一套用于执行SQL语句时的API,应用程序可以通过这套A ...
- Codeforces 787B Not Afraid( 水 )
链接:传送门 题意:判断 m 组数,如果某一组中出现负数就判断这一组中是否存在与之相反的数,如果每一组中都满足要求则输出 "NO" 反之输出 "YES" 思路: ...
- BZOJ 3028 食物 (生成函数+数学题)
题面:BZOJ传送门 题目让我们求这些物品在合法范围内任意组合,一共组合出$n$个物品的方案数 考虑把每种食物都用生成函数表示出来,然后用多项式乘法把它们乘起来,第$n$项的系数就是方案数 汉堡:$1 ...
- 运用cat EOF添加文件
[root@fyc14 nginx1]# cat <<EOF > /etc/yum.repos.d/nginx.repo> [nginx]> name=nginx rep ...
- 在 Windows10 系统中安装 Homestead 本地开发环境
在 windows10 系统中安装 homestead 本地开发环境 在 windows10 环境下安装 homestead 开发环境,网上有很多相关教程其中大多都是 mac 环境,很多大神都是用户的 ...
- 环境搭建Selenium2+Eclipse+Java+TestNG_(一)
第一步 安装JDK 第二步 下载Eclipse 第三步 在Eclipse中安装TestNG 第四步 下载Selenium IDE.SeleniumRC.IEDriverServer 第五步 下载Fi ...
- 监控Weblogic计数器
- hdu 4079简单贪心
#include<stdio.h> #include<string.h> #define ll __int64 #define N 11000 struct node { in ...