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 ...
随机推荐
- Ubuntu 文件文件夹查看权限和设置权限
ubuntu下查看权限的命令为: ls -l filename ls -ld folder ubuntu下设置权限的命令为: 一共有10位数 其中: 最前面那个 - 代表的是类型 中间那三个 rw- ...
- js json对象和数组对象
动态添加json对象: var json = {}; json['a'] = 'a'; 动态添加数组对象: var arr = []; arr['a'] = 'a';
- oracle 命令 登录
1.打开终端,输入命令:sqlplus /nolog 2.连接数据库:conn user_name/passwd@db_name
- 卖座网一处SQL注射(Http Referer sqlinjection)
漏洞作者: 猪猪侠 漏洞详情 披露状态: 2015-01-13: 细节已通知厂商并且等待厂商处理中2015-01-14: 厂商已经确认,细节仅向厂商公开2015-01-24: 细节向核心白帽子及相关领 ...
- C语言 · 逆序排列
算法提高 逆序排列 时间限制:1.0s 内存限制:512.0MB 问题描述 编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中.当用户输入0时,表示输入结束.然 ...
- VB.NET & 策略模式（下机用户类型选择）
上篇文章讲述了对于下机操作和基本数据设定的时间联系,今天主要就是应用"策略模式"来了解了解对于固定用户,以及暂时用户之间的选择,看学习设计模式的时候自己对于策略模式的理解,我们能够 ...
- EasyUI Tree checkbox node
tree插件允许你创建checkbox tree,如果你点击节点的checkbox,被点击的节点信息得到下和上的继承.例如,点击tomato节点的checkbox,你可以看到vegetables节点现 ...
- C++ 构造函数的对象初始化列表
//构造函数的对象初始化列表 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; class P ...
- 002servlet生命周期以及有关servlet的各种知识
4 Sevlet的生命周期(重点) 有关servlet的类有Servlet,HttpServlet以及GenericServlet. 其实我们要写一个Servlet只要写一个类去实现Servet就可以 ...
- MapReduce与Hadoop之比较
MapReduce与Hadoop之比较 Hadoop是Apache软件基金会发起的一个项目,在大数据分析以及非结构化数据蔓延的背景下,Hadoop受到了前所未有的关注. Hadoop是一种分布式数据和 ...