jQuery是一个快速、简洁的JavaScript代码库。
jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,
优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery是一个快速、简洁的JavaScript代码库。
jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,
优化HTML文档操作、事件处理、动画设计和Ajax交互。
console.log() 打印到控制台
$("").var() 获取对应信息内容
blur(function(){}) 这种写法 在 jquery 中 很常见
<!-- jquery选择器:$(“”)
基本选择器3种:
id选择器 // $("#p1").css("background-color","red"); // #id
标签选择器 // $("p").css("background-color","red"); // 标签名
类选择器 // $(".c1").css("background-color","red"); // .类名
其他选择器:
属性选择器 // $("[href]").css("background-color","red"); // 选中所有 href 属性的元素
交集选择器 // $("p.c2").css("background-color","red"); // 取 . 两边的交集
后代选择器 // $("ul li").css("background-color","red"); // 取 ul 下所有级的 li 标签
子选择器 // $("ul>li").css("background-color","yellow"); // 取 ul 下一级中所有的 li 标签
指定位置选择:
// $("ul li:first").css("background-color","red"); // 首位
// $("ul li:last").css("background-color","green"); // 末位
// $("ul li:eq(2)").css("background-color","blue"); // 第三位 0,1,2
text() // 得到 li 中的文本值 有参时 是为设置值,不会执行标签语言
html() // 得到li 中的 包含标签在内的值 有参时 是为设置值,执行标签语言
$("ul").append(li1); // 在 ul 后面追加 li1 变量所表示的内容
li.append(li2); <==> li.append(li2); //在 li 添加 li2
li2.insertBefore(li) // 在 li2 前插入 li
操作文档结构学习:
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
wrap 自行了解
4、替换
replaceAll() 自行了解
replaceWith()
5、删除
empty()
remove()
jquery 设置样式
$("ul li:eq(0)").attr("class","lc"); // 通过设置class 属性 而操作样式
$("ul li:eq(0)").addClass("lc2"); // 利用 class 属性 追加样式
$("ul li:eq(0)").removeClass("lc"); //消除 lc 指代的样式
$("p").css("color","blue"); // 通过css 设置样式
attr(attrName) //表示 获取attrName这个属性的值
注意此种方式不能获取value属性的实时数据,使用对象名.val()进行获取。
attr(attrName,attrValue); //表示 给 attrName 这个属性设置值 attrValue
jquery操作元素的样式
1、使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用js对象传参,提升代码书写效率。
2、使用addClass()
对象名.addClass("类选则器名")//追加一个类样式
对象名.removeClass("类选择器 名")//删除一个指定的类样式