JQuery基础 JQuery的基本操作
来源:互联网 发布:算法第四版中文版pdf 编辑:程序博客网 时间:2024/06/06 10:04
JQuery是一个javascript的框架,是对javascript的一种封装。
1若使用,需要导入jquery.min.js
<
script
src
=
"....../jquery.min.js"
/
>
2 文档加载的两种方式
$(function(){}); 是由 $();和function(){}组成
$(document).ready(function(){});是由:$(document).ready();和function(){}组成
这样写是为了防止文档在完全被加载完之前运行jquery代码
3通过id获取元素
js中:var a = document.getElementById("id")获取的是DOM里的元素节点
jquery中:var b = $("#id")获取到的是一个jquery对象(后面的b都是用的这个b)
DOM对象和JQuery对象转换:
DOM转换成jquery:var b = $(a);
jquery转换成DOM: var a = b[0];
4 取值:jquery对象的b.val()方法取值相当于js中的a.value;(a是上面获取的js对象)
b.html()和b.text()也可以获取元素中的内容
5对css样式的操作
增加class
b.addClass("lv");给一个id是id的元素设置样式为lv
<style> .lv{ background-color:black;} <style/>
删除class
b.removeClass("lv");<div class="lv"><div/>把class为lv的css样式删除
切换class
b.toggleClass("lv");把b元素的css样式切换成lv;
css函数:b.css(property,value);设置单个样式
b.css(p1:v1,p2:v2,p3:v3...);设置多个css样式
6选择器 元素 id 类 层级 最先/最后 奇偶 可见性 属性 表单对象
元素:$("div") id:$("id") 类:$(".class") 层级:
最先:$("div:first) 最后:$("div:last) 层级:$("div#d3 span")
奇数:$("div:odd") /偶数 $("div:even") 筛选:$("div").eq(4)
属性:$("selector[属性]") eg:$("div[id]") 选择有id属性的div$("div[id=‘is’]")选择id为is的div
可见性:隐藏可见的
$("div:visible").hide();显示不可见的:$("div:hidden").show();
7筛选:父元素:$("#id").parent();id为id的最近的父元素parents()选取所有的祖先元素
后代元素:$("#id").children(); /$("id").find("子元素选择器");
同级元素:$("id").siblings()
8属性:获取属性:$("id").attr("align");获取align的属性
修改属性:$("id").attr("align","right");
删除属性:$("id").removeAttr("align");
prop与attr的区别
1. 对于自定义属性:attr能够获取,prop不能获取
2. 对于选中属性:attr 只能获取初始值, 无论是否变化prop 能够访问变化后的值,并且以true|false的布尔型返回.所以在访问表单对象属性的时候,应该采用prop而非attr
9效果:show() 可以指定时间eg:show(2000)使用2秒来显示出来 隐藏:
hide()
切换:toggle()
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()都可以设置延迟
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle()fadeTo()实现
自定义动画:$("#id").animate({left:'100px'},2000);
10绑定事件:<script>
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
});
</script>
11ajax
方式1::
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result)
}
});
发送get/post方式2:$.get/post(url,param,function(result){...对返回的result的处理..});
12:遍历:$.each(array,回调函数),$.each( a, function(下标, 数组中元素引用){处理元素的方式});
去重:先a.sort();对数组a排序;调用$.unique(a);去重
是否存在数组中:$.inArray(9,a);判断9是否在a数组中,若不存在返回-1,存在就返回数组中的位置;
13去除首尾空白$.trim(" dddd ");
14JSON字符串转换为JSON对象:$.parseJSON(json字符串);
- JQuery基础 JQuery的基本操作
- jquery的ajax基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery Table 的基本操作
- Jquery的一些基本操作
- 战败
- 封装-this-static
- ThinkPHP3.2.3整合支付宝接口
- 使用JS完成首页轮播效果
- Linux下Tomcat开机自动启动
- JQuery基础 JQuery的基本操作
- KITTI与Cityscapes简介
- SPI四种模式区别
- centos7系统默认防火墙Firewall使用方法
- Android 6.0+版本运行时权限的动态申请与主要危险权限组列举
- C语言发展史,第一个C语言程序,多语言对比
- destoon中热搜功能
- Android框架---Google官方Gson解析(下)
- 安装win10系统的一些想法及经验