JQuary（从原生js到jq，就发现jq好简单）

1.jQuery介绍

jQuery是一个优秀的JavaScript库，以最少的代码实现更多的功能

特点：

1.强大的选择器的功能  $("selector")
2.语法简介  $("selector").action()
3.隐式迭代  $("div").click();   //5个div会自动循环添加点击事件
4.链式操作  $("").操作1().操作2().操作3()
5.兼容性好

2.使用

2.1 引入

下载：https://jquery.com/  官网https://www.jquery123.com/ 中文
版本：2.0以下版本  ： 使用版本  2.0以上不兼容IE
引入：本地下载好的jQuery文件网上CDN上的jQuery文件

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- 引入下载好的本地jQuery --><!-- <script src="./js/jquery-3.6.0.js"></script> -->

<!-- 引入在线的  CDN:内容分发网--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>// 特点1:语法简介  $("选择器").方法()；// 特点2：强大选择器功能  所有css中能使用选择器，在jQuery中都可以使用// 特点4：简化html文档操作，动画效果，ajax，事件$(".box").css({"width":100,"height":100,"background":"red"});// 特点3：隐式迭代$(".box").click(function(){// 特点5：链式操作  $().css(操作1)....$(this).css({"background":"teal"}).siblings().css({"background":"red"})
});
</script>

2.2 $的作用

jQuery.js文件   创建了一个jQuery对象,在这个对象上封装了各种方法
window.jQuery = window.$ = jQuery

2.3 jQuery加载方法

// 等文档和资源都加载完成后调用
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onclick = function () {
//         alert("点击");
//     }
// }
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onmouseover = function () {
//         alert("移入");
//     }
// }


//jQuery的加载方法
$(document).ready(function () {$("div").click(function () {console.log("点击");})
});

$().ready(function () {$("div").mouseover(function () {console.log("移入");})
});

$(function(){$("div").mouseout(function () {console.log("移出");})
});

/* window.onload  和  $().ready()区别window.onload 等文档和资源加载完成后调用添加多次后面的会覆盖前面的$().ready()等文档加载完成后调用添加多次，会叠加*/

注意window.onload 和 $().ready()区别

2.4 jQuery对象和DOM对象的关系

可以共存

//jQuery和js 可以共存
$("div").css({ "width": 200, "height": 200, "background": "gold" });
var oDiv = document.getElementsByTagName("div")[0];
oDiv.style.background = "teal";

不能混用

//不能混用
//oDiv.css({"width":100});
//$("div").style.width = "100px";

可以相互转换

//可以相互转换
console.log(oDiv);  //DOM对象  标签  元素集合  节点列表
console.log($("div")); //jQuery对象

//DOM对象----》jQuery对象   $(DOM)
console.log($(oDiv)); //jQuery.fn.init [div]

//jQuery对象----》转DOM对象
console.log($("div")[0]);

3.jQuery选择器

3.1 基本选择器

$(function(){//id:  $("#id")  获取到对应id名的标签$("#middle").css({"background":"pink"});
//class : $(".class名")  获取到对应class名的标签$(".box").css({"background":"teal"});
//元素  jQuery中选择器没有优先级，只有先后顺序$("li").css({"background":"orange"});
//分组  元素,元素$("p,span").css({"color":"green"});

//添加事件$("li").click(function(){console.log(this); //<li></li>  DOM元素     $(this)--转jQuery$(this).css({"background":"teal"});//$().index("selector") ： 給当前元素的父元素的所有子元素添加下标console.log($(this).index());;console.log($(this).index("li"));;});
});

3.2 层次选择器

//后代选择器
$("div span").css({"color":"red"});

//子代选择器
$("div>span").css({"color":"teal"});

//+:相邻兄弟选择器
$("p+span").css({"color":"orange"});
//~: 后面所有的
$("p~span").css({"color":"orange"});

3.3 基本过滤选择器

//:位置
$("li:first").css("background","red");
$("li:last").css("background","red");
$("li:nth-child(2n)").css("background","red");
$("li:nth-child(2n+1)").css("background","pink");
$("li:odd").css("background","red");  //奇数
$("li:even").css("background","pink"); //偶数

//:eq(下标) ： 从0开始
$("li:eq(2)").css("background","red");
var index = 3;
$("li").eq(index).css("background","pink");

//not(选择器)  ： 除了
$("li:not(.box)").css("background","pink");
$("li").not(".box").css("background","pink");


//gt():获取下标大于n   lt()：获取下标小于n
$("li:lt(3)").css("background","red");
$("li:gt(2)").css("background","#ccc");

3.4 属性过滤选择器

//E[attr]:匹配有attr属性的E标签
$("div[class]").css("background", "pink");

//E[attr=value]:匹配有attr属性并且值位value的E标签
$("div[class=box2]").css("background", "red");

//E[attr!=value]:匹配有attr属性并且值不为value的E标签
$("div[class!=box2]").css("background", "teal");

//E[attr^=value]:匹配有attr属性并且值以value开头的E标签
$("div[class^=b]").css("background", "teal");

//E[attr$=value]:匹配有attr属性并且值以value结尾的E标签
$("div[class$=4]").css("background", "orange");

//E[attr*=value]:匹配有attr属性并且值包含value的E标签
$("div[class*=s]").css("background", "deeppink");

3.5 表单选择器

//表单选择器
console.log( $(":input")); //获取的是所有的表单元素   (input button textarea select)

// :input的type类型，获取到具体类型的input
console.log($(":text")); //文档框
console.log($(":radio")); //单选框

//:checked : 获取选择框被选中的标签
console.log( $(":checkbox:checked"));
console.log( $(":checkbox:checked").length);

注意常用选择器：id，元素，class，分组，后代，子代，eq必须要掌握

4.jQuery操作标签属性

4.1操作标签属性

原生js操作标签属性：标签.属性名 = “属性值"
DOM操作标签属性：
- 设置：标签.setAttribute("属性名","属性值")
- 获取：标签.getAttribute("属性名")
- 删除：标签.removeAttribute("属性名")
jQuery操作标签属性
- $().attr() : 操作自定义属性（一般使用这个，自定义和固有都能操作）
  
  -设置：$().attr("属性名","属性值") （js取值赋值一体）
  
  -获取：$().attr("属性名")
  
  -删除：$().removeAttr("属性名")
- $().prop() ：操作固有属性 (input标签的checked属性，就必须使用prop)
  
  -设置：$().prop("属性名","属性值") （js取值赋值一体）
  
  -获取：$().prop("属性名")
  
  -删除：$().removeProp("属性名")
```
//-设置：$().attr("属性名","属性值")
$("div").attr("id","active");

//-获取：$().attr("属性名")
console.log($("div").attr("index")); //1

//删除：$().removeAttr("属性名"
$("div").removeAttr("class");


//区别 如果属性值是true false的情况下，使用prop操作属性
console.log($("input").attr("checked")); //checked  undefined
console.log($("input").prop("checked")); //true false
$("input").prop("checked",false);
```

4.2 操作class属性

//1.$().addClass("类名") ： 追加class
$(this).addClass("active");

//2.$().removeClass("类名")：删除对应的class
$(this).removeClass("active");

//3.$().hasClass("类名")  ： 判断当前元素是否存在某个类名，有返回true，不存在返回false
if($(this).hasClass("active")){ //有$(this).removeClass("active");
}else{ //没有$(this).addClass("active");
}


//4. $().toggleClass("类名") ： 开关，如果当前有这个class就删除，没有就添加
$(this).toggleClass("active");

5.jQuery操作标签内容

原生js
- 表单元素:标签.value
- 闭合标签：标签.innerHTML/innerText 操作闭合标签内容，覆盖原有内容，innerHTML识别标签，innerText不识别标签
jQuery
- 表单元素： $().val();
- 闭合元素： $().html()/text();

//1.设置表单元素：$().val("值")
$("input").val("黄河入海流");
$(window).keydown(function(ev){if(ev.keyCode == 13){//2.获取表单元素内容：$().val()var v = $("input").val();console.log($("input").val());
//3.获取闭合元素内容 $().html()console.log($("div").html()); //   <p>白日依山尽</p>console.log($("div").text()); //    白日依山尽

//4.设置闭合元素内容 $().html();//  $("div").html(v);  //会覆盖之前的$("div").html($("div").html()+"<p>"+v+"</p>");  //会覆盖之前的//  $("div").text($("div").html()+"<p>"+v+"</p>");  //会覆盖之前的}
})

6.操作标签样式

原生js：标签.style.属性名 = 属性值
jQuery：$().css()

 //1.写单个样式 $().css("属性名","属性值")
$("div").css("background","pink");

//2.写多个样式 $().css({"属性名":"属性值"})
$("div").css({"width":200,  //属性值数是数字的话， number，string(要加单位)"height":"200px","margin-top":"200", //设置无效"height":"hahahah", //給的不对，不报错，只是不给标签设置，相当于这行代码无效marginLeft:"200px" //对象key可以不加引号，如果是复合属性，使用驼峰标识
})

JQuary（从原生js到jq，就发现jq好简单）相关推荐

最新原生js轮播图案列
最新原生js轮播图案列,很简单几个步骤 1.导入html结构,结构大家都会写哦,我就展示一下,图片有些尺寸没有对上,变形很正常的,可以给几个不同颜色的盒子用来实验都可以的. html代码 <di ...
jq实现跳转404跳转,原生js实现跳转404跳转
2019独角兽企业重金招聘Python工程师标准>>> //jq实现跳转404跳转 <script> function timeGo() { ...
原生js、jq移入移出事件
在原生js上移入移出共有两种一种是冒泡的鼠标移入或移出被选元素及其所有子元素就会触发 element.onmouseover = function(){alert("移入"); ...
限制字符输入数功能(jQ版和原生JS版)
限制字符输入数功能(jQ版和原生JS版) 比较常用的限制字符输入数功能(比如热火超天的微博输入框),用jQuery和原生JavaScript分别写了一个.原生JavaScript注释中有区分中英文字符 ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
原生JS和JQ实现div的展开与收齐动画
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>展开 ...
animate用法 js原生_原生js实现jq的animate效果.js
原生js实现jq的animate效果(有一定bug未修复,有时间补上) //原生js实现jq的animate效果 /** *@param obj 执行动画的元素 *@param css JSON数值对 ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...