一 引入Jquery文件
1、下载Jquery的js文件
2、在需要使用jquery的文件中引入js文件
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。
通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。
注：只有 jQuery 对象才能调用 jQuery 提供的方法。
<script src="js/jquery-3.4.1.js"></script>
Uncaught ReferenceError: $ is not defined 报错原因：
1、没有引入jquery文件
2、引入的jquery文件顺序不对
// 得到DOM对象
var mydivDom = document.getElementById("mydiv");
console.log(mydivDom);
//console.log(document.getElementById("mydiv1"));
// 得到Jquery包装集对象
var mydivJquery = $("#mydiv");
console.log(mydivJquery);
//console.log($("#mydiv1"));
/**
* DOM对象转 Jqyery包装集对象
* 将DOM对象放到$()括号中
* Jqyery包装集对象转DOM对象
* Jqyery包装集取下标 Jqyery包装集[0]
* /
/*DOM对象转 Jqyery包装集对象*/
var dtoj = jQuery(mydivDom);
var dtoj2 = $(mydivDom);
console.log(dtoj);
console.log(dtoj2);
/*Jqyery包装集对象转DOM对象*/
var jtod = mydivJquery[0];
console.log(jtod);
/*通过each()方法遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象*/
mydivJquery.each(function(index,element){
console.log(index);
console.log(element);
console.log($(element));
console.log(this);
console.log($(this));
});
二 层次选择器
层次选择器 Hierarchy
选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素（1、只找当前元素的下一个同级 2、只找一个）
同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
三 基础选择器
基础选择器 Basics
选择器 名称 举例
id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素（id属性值）
元素名称选择器 element $("div")选择所有 div 元素 （元素名称）
类选择器 .class $(".blue")选择所有 class=blue 的元素 （class属性值）
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1, $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
selector2,
selectorN
四 表单选择器
过滤选择器
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
// 元素选择器
var inputs = $("input");
console.log(inputs.length);//只获取input标签的元素
// 表单选择器
var inps = $(":input");//获取所有的标签元素
console.log(inps.length);
// 获取所有的复选框
var cks = $(":checkbox");
console.log(cks);
console.log($("input:checkbox"));
五 操作元素的属性
获取属性
方法
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined。
举例 attr('checked') attr('name')
prop(属性名称) 获取具有 true 和 false 两个属性的属性值
举例 prop('checked')
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
attr()与prop()的区别：
共同点：都可以获取元素的属性
不同点：
1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）
2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
如何选择：
如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）
如果是非boolean类型，则使用attr()方法
// 获取元素的属性 （固有属性）
var name1 = $("#ck1").attr("name");
console.log(name1);
var name2 = $("#ck2").prop("name");
console.log(name2);
// 获取元素的属性 （自定义属性属性）
var a1 = $("#ck1").attr("aa");
var a2 = $("#ck1").prop("aa");
console.log(a1,a2);
// 获取元素的属性 （设置过属性且属性返回值是boolean类型）
var c1 = $("#ck1").attr("checked");
var c2 = $("#ck1").prop("checked");
console.log(c1,c2);
// 获取元素的属性 （未设置过属性且属性返回值是boolean类型）
var c11 = $("#ck2").attr("checked");
var c22 = $("#ck2").prop("checked");
console.log(c11,c22);
// 设置元素的属性值
$("#ck1").attr("value","1");
$("#ck2").prop("value","2");
// attr()
$("#ck1").attr("checked","checked");
$("#ck2").prop("checked",true);
// 移除属性
$("#ck1").removeAttr("name");
六 操作元素的样式
操作元素的样式
方法 说明
attr(“class”) 获取 class 属性的值，即样式名称
attr(“class”,”样式名”) 修改 class 属性的值，修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
增加元素的具体样式，格式：
(1)css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({"background-color":"red","color":"#fff"})2）css(“样式名”,”样式值”)
例：css('color','white')
(2)css(“样式名”,”样式值”)
例：css('color','white')
attr(): 设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖
addClass(): 添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
css(): 设置具体的样式（设置行内样式，写在style属性中的样式）
// 设置元素的class属性
$("#conRed").attr("class","red");
$("#conBlue").attr("class","green");
// 给元素添加元素
$("#conRed").addClass("larger");
$("#conRed").addClass("green");
// 设置具体的样式
// 设置一个样式
$("#remove").css("color","chartreuse");
// 同时设置多个
$("#remove").css({"font-weight":700,"height":"200px"});
// 移除样式 （样式名）
$("#conRed").removeClass("larger");
七 操作元素的内容
操作元素的内容
方法 说明
html() 获取元素的 html 内容
html("html 内容") 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text("text 内容") 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
html()和text()
html()可以识别数据中的html标签并 显示出来；
text()不识别html标签，会当做纯文本显示
取值时，html()能够获取到元素中的html代码，text()只会获取纯文本
表单元素：取值赋值使用 val()
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
非表单元素：取值赋值使用 html()和text()
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
// 获取表单元素的值
var uname = $("#uname").val();
console.log(uname);
// 设置表单元素的值
$("#uname").val("今天天气不错");
var uname2 = $("#uname").val();
console.log(uname2);
// html() 和 text()
// 设置非表单元素的值
$("#html").html("你好");
$("#text").text("你好");
$("#html").html("<h2>你好</h2>");
$("#text").text("<h2>你好</h2>");
// 获取元素的值
var html = $("#html").html();
var txt = $("#html").text();
console.log(html);
console.log(txt);
八 创建元素,添加元素
创建元素
$(‘元素内容’)
添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(sector) 把 content 元素或内容插入 selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
/*创建元素*/
var div = "<div>你好</div>";
console.log(div);
console.log($(div));
/*添加元素*/
// prepend()方法前追加内容
$("#person").prepend("<span>小奶狗</span>");
// prependTo()方法前追加内容
$("<span>小狼狗</span>").prependTo($("#person"));
// append()方法后追加内容
$("#person").append("<span>舔狗</span>");
// appendTo()方法后追加内容
$("<span>老腊肉</span>").appendTo($("#person"));
// 如果追加的元素是已存在的元素，则直接移动到指定元素中
$("#person").append($(".red"));
// before()
$(".blue").before("<span class='pink'>女神</span>");
// after()
$(".blue").after("<span class='skyblue'>歌手</span>");
九 删除元素,遍历元素
删除元素
方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
// 删除元素
$(".green").remove();
// 清空元素
$(".blue").empty();
// $(selector).each(function(index,element)) :遍历元素
/*$(".pink").each(function(){
console.log(this);
console.log(this.innerHTML);
console.log($(this).html());
});*/
$(".pink").each(function(index,element){
console.log(index);
console.log(element);
console.log($(element).html());
});
十 ready加载事件
ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
ready()加载事件和onload加载事件：
ready()加载事件在dom结构（htm标签）加载完毕后，就执行
onload加载事件在dom结构（htm标签）及引入的外部资源（js文件、css文件等）加载完毕之后才执行
// JS
window.onload = function() {
console.log("js的预加载事件....");
}
// jquery
$(document).ready(function(){
console.log("jquery的预加载事件....");
console.log($("#mydiv"));
});
$(function(){
console.log("jquery的预加载事件2....");
});
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
