您的位置:首页 > Web前端 > JQuery

jQuery

2020-03-22 18:17 666 查看

1.jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

1)美元符号定义 jQuery
2)选择符(selector)“查询"和"查找” HTML 元素
3)jQuery 的 action() 执行对元素的操作
例子

1)$(this).hide() - 隐藏当前元素
2)$("p").hide() - 隐藏所有 <p> 元素
3)$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
4)$("#test").hide() - 隐藏所有 id="test" 的元素

2.jQuery 选择器

元素选择器

$("p")

#id 选择器

$("#test")

.class 选择器

$(".test")

3.jQuery 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	 	blur	unload
hover

4.jQuery 效果

隐藏和显示

$("p").hide();
$("p").show();

淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

滑动

slideDown()
slideUp()
slideToggle()

动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
链(Chaining) Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

5.iQuery Html

获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值

设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("p").append("追加文本");

删除元素/内容

remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
$("#div1").remove();

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("h1,h2,p").addClass("blue");

jQuery 尺寸方法

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

6.jQuery - AJAX get() 和 post() 方法

$("button").click(function(){
$.post("url",
{
name:"xm",
url:"http://www.baidu.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});

$("button").click(function(){
$.get("url",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
  • 点赞
  • 收藏
  • 分享
  • 文章举报
计算机技术之指尖密码 发布了36 篇原创文章 · 获赞 0 · 访问量 361 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: