JQuery基础 JQuery的基本操作

最新推荐文章于 2022-07-12 19:03:35 发布

qq_38767992

最新推荐文章于 2022-07-12 19:03:35 发布

阅读量238

点赞数 1

文章标签： jquery的基础知识 jquery的学习 jquery基本

本文链接：https://blog.csdn.net/qq_38767992/article/details/78256884

版权

JQuery是一个javascript的框架，是对javascript的一种封装。

1若使用，需要导入jquery.min.js

<scriptsrc="....../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字符串)；