jQuery总结_jq点击时判断有就去掉没有就添加-CSDN博客

本文链接：https://blog.csdn.net/li2534153206/article/details/80143262

概念：

jQuery是一个JavaScript库，把常用的方法封装到js文件中，需要使用的时候直接调用即可。

特点：

        Write less,do more;
        jQuery is designed to change the way that you write JavaScript;
        支持各种主流浏览器；
        以强大的CSS选择器为基础，几乎对所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作；
        屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API;
        强大的插件机制；
        社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。

引入JQuery包注意事项：

1.是否引包
2.引包顺序
3.引包路径出错

入口函数详细介绍

        第一种：$("document").ready(function () { } );
类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
        第二种：$(function () { } );
        $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

jQuery入口函数和js的入口函数window.onload的区别：

        Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
        Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
        jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
        jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。
        文档加载的顺序：从上往下，边解析边执行。

jQuery对象和DOM对象

jQuery对象：用jQuery方法获取到的元素返回的对象
DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象

两者的区别：

jQuery对象就是DOM对象的包装集（伪数组）

两者之间的转换：

jQuery对象转DOM对象：

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）

// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

DOM对象转jQuery对象：

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

jQuery常用选择器

1.基本选择器

$(".className")  类选择器
$("#id")  id选择器
$("tagName") 标签选择器
$("selector1,selector2")  并集选择器
$("selector1selector2") 交集选择器

2. 层级选择器

后代 选择器  $("selector1 selector2")
子代 选择器  $("selector1>selector2")

3. 过滤选择器

 格式：$("selector:filter")
odd   $("selector:odd")  奇数过滤选择器
even  $("selector:even")  偶数过滤选择器
eq(index)  $("selector:eq(index)")  序号过滤选择器

4. 筛选选择器

//筛选选择器全都是方法
children(selector)
find(selector)
next()
siblings(selector)
parent()
eq(index)

jQuery动画效果

隐藏/显示：

hide/show(speed,callback); speed(空/slow/fast/毫秒)
$("#hide").click(function(){
$("p").hide();//隐藏 p标签;
$("p").show();//显示 p＝标签;
});

淡入/淡出：

fadeIn/fadeout(speed,callback)
$(“#click”).click(function(){
$(“#div1”).fadeIn();//直接显示；
$(“#div2”).fadeIn(“slow”);//慢慢显示；
$(“#div3”).fadeIn(3000);//用3秒时间显示；
})

滑动：

slideDown/slideUp(speed,callback)
$(“#click”).click(function(){
$(“#div1”).slideDown();//直接下滑；
$(“#div2”).slideDown(“slow”);//慢慢下滑；
$(“#div3”).slideDown (3000);//用3秒时间下滑；
})

jQuery中的DOM操作

获取文本值、属性值：

<p id=”test”>这是一段文字中的<b>粗体</b></p>
<input id=”input” value=”文本值”/>
<a id=”a” href=”http://...”></a>

$(“#test”).text();//输出“这是一段文字中的粗体”
$(“#test”).html();//输出“这是一段文字中的<b>粗体</b>”
$(“#input”).val();//输出“文本值”
$(“#a”).attr(“href”);//输出“http://...”, 获取元素属性值

设置文本属性值：

$(“#test”).text('');
$(“#test”).html('');
$(“#input”).val('');
$(“#a”).attr('href','xxx');

添加元素：

$(“#test”).append(“<span>添加文本</span>”;//在id=test的标签末尾添加这段代码
$(“#test”).prepend(“<span>添加文本</span>”;//在被选标签的开头添加这段代码
$(“#test”).after(“<span>添加文本</span>”;//在被选标签之后添加这段代码
$(“#test”).before(“<span>添加文本</span>”;//在被选 标签之前添加这段代码

删除元素：

$(“#div1”).remove();//删除被选元素及其所有的子元素
$(“#div1”).empty();//删除被选元素的所有子元素
$(“#div1”).remove(“.info”);//删除被选元素的类名为info的子元素

查找元素：

$("#test").parent(); //返回被选元素的直接父级元素（只是一个）；
$("#test").parents(); //返回被选元素所有的祖先元素；
$("#test").children(空/选择器);//值为空时返回被选元素的所有直接子元素（很多），为选择器时返回特定子元素（只是一个）；
$("#test").find('.aaa'); //在test元素下寻找类名为aaa的元素
$("#test").next(); //返回被选元素的下一个同胞元素（只一个）；

操作css:

设置单个样式      css(name, value)
设置多个样式      css(obj)  {name:value,name:value....,name:value}
获取样式            css(name)
添加class      addClass(className)  追加
移除class      removeClass(className) 如果不传参数 移除所有的样式
判断class样式      hasClass(className)
切换class样式      toggleClass(className)  若有则移除，若无则添加