文章详细介绍了jQuery中的$运算符的多种用法，如传入参数的不同类型及对应的DOM操作，jQuery对象与DOM对象的转换，以及选择器的使用，包括基本选择器、层级选择器、过滤选择器等。此外，还讨论了jQuery中的属性操作、元素筛选、CSS样式操作和事件处理，如事件冒泡和阻止冒泡。
1.$运算符
1.传入参数为方法时，页面加载完成后自动调用
$(function({
// ......
}))2.传入参数为HTML字符串，根据字符串创建节点对象。
$(" <button id=\"bton1\">按钮1</button>\n" +
" <button>按钮2</button>\n" +
" <button>按钮3</button>").appendTo("body");3.传入参数为选择器字符串时，根据字符串查找元素节点对象
$("#bton1") //得到id=bton1元素节点对象4.传入参数为dom对象时，会转为jQuery对象
alert($("#bton1")); //[object Object]
alert(document.getElementById("bton1")); //[object HTMLButtonElement]
alert($(document.getElementById("bton1"))); //[object Object]2.jQuery对象与dom对象的区分
Dom对象：通过getElementBy...获得的对象
jQuery对象：通过$获得的对象
3.jQuery对象的本质
jQuery对象即为Dom对象数组 +jQuery提供的一系列功能函数
4.jQuery对象与Dom对象的使用区别
jQuery对象不能使用Dom对象的属性和方法，反之亦然
5.jQuery对象与Dom对象的互转
$(Dom对象) =》 jQuery对象
jQuery对象[下标] =》Dom对象
例：
alert($(document.getElementById("testDiv")));
alert($(document.getElementById("testDiv"))[0]);6.jQuery对象选择器
6.1基本选择器
- id选择器 $("#id")
- 元素选择器 $("div")
- class类选择器 $(".class")
- 所有选择器 $("*")
- 组合选择器 $("div,span,p.myClass") //获得div, span , p(class = "myClass")的jQuery对象
6.2 层级选择器
- $("div input") 空格：找到父元素下的所有后代元素
- $("div > input") >: 找到父元素下所有的子元素
- $("div + input") +:找到pre元素后面的所有next元素
- $("div ~ input") ~：找到pre元素后面的所有同辈next元素
6.3过滤选择器
- :first 获得第一个元素 //$("li:first")
- :last 获得最后一个元素
- :not 不要选中的
- :even 查找索引值为偶数的（从0开始）
- :odd 查找索引值为奇数的（从0开始）
- :eq(index) 查找索引值为index的（从0开始）
- :gt(index) 查找索引值>index的
- :lt(index) 查找索引值<index的
- :header 查找所有标题
- :animated 查找正在执行动画的
6.4内容选择器
- :contains(文本) 匹配包含给定文本的元素 //$("div :contains("hello")")
- :empty 匹配不包含子元素或文本的空元素
- :parent 匹配包含子元素或文本的元素
- :has(selector) 匹配含有选择器所匹配的元素的元素
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function () {
$("div:contains('di')").css("background","#bbffaa");
})
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});6.5 属性过滤器
- [attribute] 匹配有attribute属性的元素
- [attribute = value] 匹配属性值为value的元素
- [attribute != value] 匹配属性值不为value和不存在attribute属性的元素
- [attribute ^= value] 匹配属性值以value开头的元素
- [attribute $= value] 匹配属性值以value结尾的元素
- [attribute *= value] 匹配属性值包含value的元素
6.6复合属性过滤器
6.5 and 6.6
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title=test]").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});6.7 表单选择器
type =
- :input
- :text 单行文本框
- :password
- ......
$(function(){
/**
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象的属性
:enabled 可用
:disabled 不可用过
:checked 单选复选框
:selected 下拉列表
*/
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
$(":text:enabled").val("New Value");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("New Value Too");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert($(":checkbox:checked").size())
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
// var str = "";
// var eles = $(":checkbox");
// console.log(eles);
// for(var i=0;i<eles.size();i++){
// str += "【"+$(eles[i]).val()+"】";
// }
// alert(str)
var $checkbox = $(":checkbox");
$checkbox.each(function (){
alert(this.value);
})
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
var str = "";
//注意这个选择器的特殊，因为select里面的option是真正的被选择项，
//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
//必须按照基本选择器选择后代的方法选
var els = $("select option:selected");
// console.log(els);
// for(var i=0;i<els.size();i++){
// str += "【"+$(els[i]).val()+"】";
// }
// alert(str)
els.each(function () {
str += "【"+ this.innerHTML+"】";
})
alert(str)
});
})6.8 元素的筛选
$(元素).方法()
- eq() 功能与:eq() 一样
- first()
- last()
- fliter(exp) 留下匹配的元素
- is(exp) 是否是给定的元素返回true/false
- has(exp)
- not(exp)
- children(exp) '>'
- find(exp) ' ' 所有后代元素
- next() 下一个兄弟元素
- nextAll() '~'
- nextUtil(exp) 当前之后到exp之间的元素 全开区间
- parent()
- prev() 前面一个
- prevAll() 前面全部
- prevutil(exo) 当前之前到exp之间的元素 全开区间
- siblings() 全部兄弟
- add() 添加
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
/**
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
串联
add(expr|ele|html|obj[,con])
*/
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
alert($("#one").is(":empty"));
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find(".mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two")
.add(".mini").add("#one").css("background-color","#bfa");
});
});7.jQuery的属性操作
7.1一些函数
- html([text]) 设置和获取起始标签和结束标签中的内容 == Dom对象.innerHTML
- text([text]) 设置和获取起始标签和结束标签中的文本 == Dom对象.innerText
- val([text]) 设置和获取表单项中的value属性值 == Dom对象.value
批量处理单选框和多选框以及下拉列表
$("input[type=button]:eq(0)").click(function(){
//$("#single :option:eq(2)").attr("selected", "selected");
$("#single").val(["s3"]);
});
$("input[type=button]:eq(1)").click(function(){
$("#multiple").val(["x2", "x4"]);
});
$("input[type=button]:eq(2)").click(function(){
$(":checkbox").val(["check2", "check4"]);
});
$("input[type=button]:eq(3)").click(function(){
$(":radio").val(["radio2"]);
});
//同时操作
$(":checkbox,:radio,#single").val(["...","...","...","..."])4.attr()
(属性可以为自定义的)
一个参数为获取属性值
两个参数为设置属性值
5.prop() 与 attr()使用方法一样
区别：对于checked,readOnly,selected,disabled等等在元素中可以不设置的属性，attr()获取时会返回undifined，而prop()会返回false ，推荐用prop方法
7.2 Dom的增删改
1.内部插入：
appendTo()、prependTo()
例：a.appendTo(b) b元素尾插a
a.prependTo(b) b元素首插a
$("<h1>标题</h1>").appendTo("div") //div(...,h1)
$("<h1>标题</h1>").prependTo("div") //div(h1,...)2.外部插入
insertAfter()、insertBefore()
例：a.insertAfter(b) b元素后插a => ba
a.insertBefore(b) b元素前插a => ab
3.替换
replaceWith()、replaceAll()
例：a.replaceWith(b) b替换a
a.replaceAll(b) a替换所有的b
区别：
$(selector).replaceWith(content)
$(content).replaceAll(selector)
//
a.replaceWith(b) 是jQuery中的方法，它需要一个jQuery对象作为参数b，这个对象可以是任何元素、文本或HTML标记。这个方法会将元素a替换为参数b所代表的内容。如果使用这种方式，需要注意的是，元素a所包含的所有事件监听和数据也会被删除。
而b.replaceAll(a)是原生JavaScript中的方法，它需要一个字符串作为参数a，这个字符串必须是CSS选择器，用于查找要替换的元素。同时，参数b可以是任何字符串，用于代表替换后的内容。这个方法会将匹配选择器a的所有元素替换为参数b所代表的内容。如果使用这种方式，元素a所包含的事件监听和数据将被保留。
4.删除
remove() 、empty()
例：a.remove() a及其内容全部清空
a.empty() a的内容被清空
8 css 样式操作
1.addClass() 添加样式
可添加多个样式 $().addClass('样式1 样式2 ......');
2.removeClass(‘样式’) 删除样式
3.toggleClass('样式') 添加/删除切换
4.offset() 获取匹配元素坐标，有参数则为修改
$().offset({
top:100px,
left:100px
})
9 jQuery 动画操作
9.1基本动画
1.show() 将隐藏的元素显示
2.hide() 将可见的元素隐藏
3.toggle() 可见就隐藏，不可见就显示
4.fadeIn() 淡入，慢慢显示
5.fadeOut() 淡出，慢慢消失
6.fadeToggle() 淡入/淡出切换
以上方法都可以添加参数
第一个参数：动画执行时长，ms为单位
第二个参数：回调函数，动画完成后自动调用的函数（可通过类似递归调用，实现动画的重复）
7.fadeTo() 在指定时长内将透明度（0~1）修改为指定值
例：$().fadeTo(2000,05,function); //在两秒内，将透明度改为0.5
10. jQuery事件操作
1.$(function(){}) 与 window.onload = function(){} 的区别
触发时间不同：
1.jQuery的页面加载完后是浏览器内核解析完页面的标签创建好Dom对象之后就会立马执行
2.原生的js的页面加载完成之后，除了要等浏览器内核解析完标签创建好Dom对象，还要等标签显示时的需要的内容加载完成。
jQuery先执行 ， js原生后执行
执行次数不同：
jQuery可以多个依次顺序执行，js原生只执行最后一次
2.jQuery常用的事件处理方法
可以绑定事件（传入function()时），以及触发事件（没有function()时）
click() 点击
mouseover() 鼠标移入
mouseout() 鼠标移出
$("h5").mouseout(function (){
console.log("移出")
})
$("h5").mouseover(function (){
console.log("移入")
})bind() 可以给元素一次绑定一个或多个事件
$("h5").bind("click mouseout mouseover",function () {
console.log("哈哈")
})one() 和bind()一样，但每个事件只响应一次
unbind() 取消绑定一个或多个或全部
$("h5").unbind("click mouseout")live() 绑定所有匹配的元素，包括后来创建的也匹配的元素
$("h5").live("click",function () {
alert("hello world");
})
$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo("#panel");11.事件的冒泡
1.事件的冒泡：父子元素同时监听一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
$(function(){
$("#content").click(function(){
alert("我是div");
})
$("span").click(function(){
alert("我是span");
})
})
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
点击子元素span,父元素事件也会相应:
2.如何取消事件的冒泡：return false;
$(function(){
$("#content").click(function(){
alert("我是div");
})
$("span").click(function(){
alert("我是span");
return false;
})
})12.javaScript事件对象
1.事件对象：是指封装有事件信息的一个javaScript对象
2.获取方法：在事件的funtion()参数中加入一个event对象，即funtion(event){}
//1.原生javascript获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event){
console.log(event);
}
}
//2.JQuery代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event){
console.log(event);
})
})
3.作用：获取当前操作的是什么事件
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(function () {
$("#areaDiv").bind("mouseover mouseout",function (event) {
if(event.type == 'mouseover'){
console.log("当前为mouseover事件");
}else{
console.log("当前为mouseout事件");
}
})
})
扫一扫
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
