jquery的常用知识点
一、用jquery寻找元素
1、选择器
基本选择器：
$("*")
$("#id") 用id匹配
$(".class") 用class名匹配
$("element") 用标签名匹配
$(".class,p,div") 组合匹配
层级选择器：
$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")
基本筛选器：
$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)")
属性选择器：
$('[id="div1"]')
$('["new_name="zhang"][id]')
表单选择器：
$("[type='text']")----->$(":text")
其中用的最频繁的就是基本选择器和层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab功能</title>
<script src="jquery.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
} .current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li new_name="c1" class="current" onclick="tab(this);">菜单一</li>
<li new_name="c2" onclick="tab(this);">菜单二</li>
<li new_name="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div> </div>
</body>
<script>
function tab(self){
var index=$(self).attr("new_name");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current"); }
</script>
</html>
tab标签切换例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title> <style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;} .hide{
display: none;
} </style>
</head>
<body> <div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
</div>
</div> </div>
<div class="content"></div> </div> </body>
<script>
function show(self){
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide"); }
</script>
</html>
菜单折叠例子
2、筛选器
过滤筛选器：
$("li").eq(2) 索引为2的li标签
$("li").first()
$("ul li").hasclass("test") 返回布尔值，判断是否有class属性
查找选择器：
$("div").children(".test") #查找class为test的子标签
$("div").find(".test") 查找节点下的所有class为test的标签
$(".test").next() #查找下一个兄弟标签
$(".test").nextAll()
$(".test").nextUntil()
$("div").prev() #查找上一个兄弟标签
$("div").prevAll()
$("div").prevUntil()
$(".test").parent() 查找父标签
$(".test").parents() 查找叔父标签
$(".test").parentUntil()
$("div").siblings() #查找所有兄弟标签
二、操作元素
1、属性操作
--------------------------属性
$("").attr(); 查找属性（可查自定义属性）
$("").removeAttr(); 删除属性
$("").prop(); 查找属性（只能查固有的属性）
$("").removeProp(); 删除固有属性
--------------------------CSS类
$("").addClass(class|fn) 增加class样式名
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn]) #查找子节点的html代码
$("").text([val|fn]) 查找文本值
$("").val([val|fn|arr]) 查找value值
---------------------------
$("").css("color","red") #添加修改css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script> </head>
<body> <button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button> <table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
} </script>
</html>
全选反选例子
2、文档处理
//创建一个标签对象
$("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()
$("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div> <script src="jquery.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){ $(self).parent().remove() } </script>
</body>
</html>
赋值样式条
3、css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.hide{
display: none;
}
.returnTop{
height: 30px;
width: 90px;
background-color: darkgray;
position: fixed;
color: greenyellow;
bottom: 30px;
right: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.div p{
height: 150px;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 500px;
}
.div1{
background-color: orchid;
font-size: 5px;
overflow: auto;
width: 500px;
}
</style>
</head>
<body>
<div class="div1 div">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p> </div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body>
<script src="jquery.min.js"></script>
<script>
//监听一个window的滚轮事件
window.onscroll = function () {
//当滚轮像素大于200的时候显示返回顶部的标签
if($(window).scrollTop()>200){
$(".returnTop").removeClass("hide")
}else{
$(".returnTop").addClass("hide")
}
}
//将滚轮像素调整到0就是返回顶部了
function returnTop() {
$(window).scrollTop(0)
}
</script>
</html>
返回顶部
三、事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件； [selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
http://www.cnblogs.com/yuanchenqi/articles/6070667.html
jquery的常用知识点的更多相关文章
- jQuery学习和知识点总结归纳
jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用.jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作.下面把PHP程 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- DB2_SQL_常用知识点&实践
DB2_SQL_常用知识点&实践 一.删除表中的数据(delete或truncate) 1 truncate table T_USER immediate; 说明:Truncate是一个能够快 ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- jquery的常用插件
jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...
- jQuery中常用的函数方法
jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...
- JAVA常用知识点及面试题总结
1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...
- HTML常用知识点代码演示
1 HTML部分常用知识点 <!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一根元素 --> <html> <!-- 对网 ...
- Java 常用知识点
Java 常用知识点 1.日期格式化 SimpleDateFormat Date date=new Date(System.currentTimeMillis()) ; SimpleDateForma ...
随机推荐
- 读取SD卡中的图片
Touxiang=(ImageView)view.findViewById(R.id.Touxiang); //头像Bitmap bm = BitmapFactory.decodeFile(" ...
- HTTP Header Accept-Language的ctf
题目也不知道该怎么取,但是是实在的一个案例.分享给大家. 种族歧视分值: 300 小明同学今天访问了一个网站,竟然不允许中国人访问!太坑了,于是小明同学决心一定要进去一探究竟! 发现accept-L ...
- xcode6 dyld_sim is not owned by root
如果运行复制过来的xcode可能会这个提示,xcode6 dyld_sim is not owned by root解决方法打开终端 输入sudo xcode-select -switch /Appl ...
- 编写自己的代码库（javascript常用实例的实现与封装）
https://segmentfault.com/a/1190000010225928
- jquery-alert对话框
IE的alert没有标题,如果是做企业系统的话,弹出来的的感觉不是很好,所以自己找了一下国外有没有做好的,经过1个小时的奋斗,找到一个不错的,自己重写整理了一下 下载地址如下:http://downl ...
- P2P网络穿越 NAT穿越
http://blog.csdn.net/mazidao2008/article/details/4933730 ——————————————————————————————————————————— ...
- Android中如何让DialogFragment全屏
1. 在DialogFragment的oncreate里面做 @Override public void onCreate(Bundle savedInstanceState) { super.onC ...
- PyCharm中设置菜单字体大小
file——>setting,然后选择appearance,下图右侧红色边框中的内容即设置菜单的字体和大小
- 006杰信—factory更新数据
本博客的资源全部来源于传智播客. factroy更新的执行流程和003杰信-在jsp页面输入数据,然后在oracle数据库中插入factory数据,当字段允许为空时要特殊处理差不多, 1.在jFact ...
- 【BZOJ】1022: [SHOI2008]小约翰的游戏John（博弈论）
http://www.lydsy.com/JudgeOnline/problem.php?id=1022 好神的博弈论. 题解见dzy的blog:http://dzy493941464.is-prog ...