jquery 常用方法 集锦
JQuery常用方法
1、获取元素
$("标签名")、$("#id")、$(".类名")、$("标签名,#id,.class")
$("祖先 子孙")、$("父>子")、$("前+后")、$("兄~弟")指定层次关系
$("p[id]")获取有id的p、$("p[id^=p]")获取有id且,id设定值最初部分都为p的元素
$("li:odd")获取奇数序号元素,通过过滤器获取元素:even、:first、eq(index)、:not(:first)获取除第一个元素之外的其它元素
$(":input")获取表单元素
$("input:text:disabled")、:enabled、:checked、:selected通过过滤器获取表单元素
$("p").eq(2)通过指定序号获取元素
$("p").filter(".center")获取条件一致的元素
$("p").slice(4,7)获取制定范围的元素
$("p").is(".blue")获取class为blue的p
$("p").next(".yes")获取p的下个class为yes的元素
$("p").prev(".yes")获取前一个元素
$("p").parent()获取父元素
$("p").children()获取子元素
2、元素控制
$("div").append("<p>追加p标签</p>")在元素内部追加内容
$("p").appendTo("#content")在元素不同位置追加内容
$("p").prepend()在元素前追加内容
$("p").prependTo("#content)将p追加到#content之前
$("p").after()元素后追加兄弟元素
$("p").before()元素前追加
$("span").wrap("<div></div>")用指定结构元素包含元素
$("p").wrapAll("<div></div>")用指定结构元素包含多个元素的集合
$("p").wrapInner("<b></b>")用指定标签包含子元素
$(A).replaceWith(B)用B元素替换A元素
$(A).replaceAll(B)将B元素替换成A元素
$("p").empty()删除p的子元素
$("p").remove("#id")删除p中的id p元素
$("p").clone().prependTo("#id")复制并插入元素p
3、获取与控制属性
$("p").attr(name | properties | key,value | key,fn)获取、设置属性值
$("p").removeAttr("style")删除属性值
$("p").addClass("class") [注意:没有点]修改class属性值
$("p").toggleClass("class",cnt++%3==0)根据条件设置class值
$("p").html(val)设置html元素
$("p").html()获取html元素
$("p").text()获取文本
$("p").text(val)设置文本
$("p").val()获取、设置value
4、CSS控制
$("p").css("color")获取元素的style属性值
$("p").css("color","red")设置属性值
$("p").css({color:"white",backgroundColor:"green"})设置属性值
var off=$("p").offset();off.top;获取元素显示位置
$("p").height()获取元素高度
$("p").width()获取元素宽度
5、事件控制
$(document).ready(fn()) | $(fn())导入页面后执行函数
$("p").bind("click",function(){}) | unbind 事件绑定函数
$("p").hover(over(),out())鼠标放置/离开动作
$("p").toggle(fn1(),fn2(),fn3(),···)元素被单击时函数的切换操作
$("p").click(fn())元素单击事件
$("p").mouseover()在元素中绑定mouseover事件
$("p").mouseout()绑定mouseout事件
6、设定效果
$("p").show([speed(um),[callback(fn())]])显示隐藏元素
$("p").hide(speed,callback)隐藏显示元素
$("p").toggle( | switch | speed,callback )切换元素显示/隐藏状态
$("p").slideUp(speed,callback)渐进隐藏元素
$("p").slideDown(speed,callback)逐渐显示元素
$("p").slideToggle(speed,callback)交替显示元素
$("p").fadeIn(speed,callback)控制元素的渐入效果
$("p").fadeOut(speed,callback)控制元素的渐出效果
$("p").animate(params,options | params,[duration],[easing],[callback])运行自定义动画
7、Ajax的控制
$.ajax(options) | jQuery.ajax(options)通过HTTP通信读入页面
$("p").load(url,data,callback)读入HTML文件后插入到元素中
$("p").ajaxComplete(callback)ajax通信完成后执行的函数
$("p").ajaxError(callback)设置ajax通信失败后执行的函数
$("p").ajaxSuccess(callback)设置ajax通信成功后执行的函数
$("form").serialize()系列化获取元素值
实例:
<%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(document).ready(function() {// =================选择器// 1, id选择器// var a = $("#container").html("天不错");// 2, class选择器, 返回的对象是一个数组// var b = $(".dd").eq(2).html("哈哈哈");// 3, element选择器, 返回的也是一个数组 /* var a = $("p");for(var p in a) {console.log(p+"======="+a[p]);} */// =====================属性// 设置属性 /* $("#container1").attr({cc:"dd"});// 获取属性console.log($("#container1").attr("cc"));// 移除属性$("#container1").removeAttr("cc");console.log("==="+$("#container1").attr("cc")); */// ===================文档处理// append方法, 追加一部分内容// $("#container1").append(", 今天晚上吃点啥 ?");// appendTo, 追加到所有的对象中// $("#container").appendTo(".dd");// replaceWith(后面换前面), 移动之后来替换, 不是复制!!!// $("#container").replaceWith($(".dd").eq(1));// replaceAll(前面换后面)// $("#container").replaceAll(".dd");// 将某个元素置空// $("#container").empty();// 将某个元素移除//$("#container").remove();// ==================CSS// 以字符串的形式返回这个css属性的值// var t = $("#container").css("border");// 设置一个css样式// $("#container").css({"color":"pink","font-family":"楷体"});// =====================事件 /* $(".dd[aa='bb']").click(function() {$("#container").toggle(5000);}); */// ===========================ajax// $.get(请求的地址,需要传递的参数,回调函数,返回的数据类型);// $.post(请求的地址,需要传递的参数,回调函数,返回的数据类型); /* $.ajax({async:true,// 默认是trueurl:"",data:"",dataType:"",type:"",success:function(data) {},error:function() {}}); */ }); </script> </head> <body> <div style="width:100px;color:red;border:1px red solid;" id="container">你好</div> <div class="dd" aa="bb">111</div> <div class="dd">222</div> <div class="dd">333</div> </body> </html>
转载于:https://www.cnblogs.com/bekeyuan123/p/7103811.html
jquery 常用方法 集锦相关推荐
- Jquery 常用方法经典总结
Jquery 常用方法: 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象( ...
- jQuery 常用方法总结
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
- jQuery常用方法
jQuery常用方法 val():设置或获取选中元素的value值 text():设置或获取选中元素的文本内容(会覆盖之前的文本内容) html():设置或获取选中元素的HTML内容(会覆盖之前的HT ...
- Python学习 Day38 jQuery常用方法03
jQuery常用方法 一.css方法 概述:CSS这个方法是JQ框架给我们提供的,它主要的作用是可以设置匹配节点行内样式 CSS方法是JQ框架提供的,给匹配节点添加行内样式 JQ支持链式语法:从左到右 ...
- jQuery——常用方法
$的作用 1.$其实就是一个函数名,是jQuery的所缩写 2.$可以作为选择器,获取DOM对象对应的jQuery对象 3.$可以将一个DOM对象,转换成一个jQuery对象 4.事件中的this,指 ...
- jQuery常用方法汇总
常用方法索引: 1.JQuery自执行函数(三种) 2.text() html() val() 3.css() 4.get() 非ajax用法 5.parent() c ...
- Web 开发最有用的 jQuery 插件集锦
一.Responsive SlideShow--图片滑块展示 1.Responsive Carousel responsive-carousel 是一个内容传送带插件,支持鼠标.触摸和键盘操作.默认包 ...
- jQuery常用方法一览
Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...
- 前端那些事之原生js实现jquery常用方法
2019独角兽企业重金招聘Python工程师标准>>> 原生js封装,实现jquery中常用 方法 //定义一个对象 - 名字是$ var $$ = function() {this ...
- jQuery常用方法(二)-事件
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以 有很多个函数被加载执行,按照fn的顺序来执行. bind( ty ...
最新文章
- 与14级团队同学的约定
- VTK:Filtering之VectorFieldNonZeroExtraction
- elasticsearch 根据条件更新数据
- 取消myeclipse2017的Dashboard页面
- php 百度云 上传,求个PHP版百度云BOS上传文件的dome
- 单片机如何关掉蜂鸣器_【开源】蜂鸣器怎样实现类似高级冰箱上很清脆“叮叮”声......
- Ambari集群里操作时典型权限问题put: `/home/bigdata/1.txt': No such file or directory的解决方案(图文详解)...
- Android攻略--单位转化器UC--Units Converter(学习笔记)
- python+selenium自动化测试环境搭建步骤(selenium环境搭建)-绝不浪费您的时间
- github上传代码步骤
- 直播教学系统16项功能
- 在计算机中移动硬盘一般用作什么,移动硬盘是什么
- 计算机读不出来u盘装系统,细说电脑重装系统u盘读不出怎么办
- Materials - 剑网3地形材质若干
- 《Python绝技:运用Python成为顶级黑客》python3实践记录
- 汉字在计算机中的表示
- uni-app 开发微信小程序 自动化编译,启动项目
- UDS诊断系列介绍08-19服务
- 二级c语言常用,二级C语言常用库函数.doc
- iOS 获取网络时间