一 引入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....");
});