JQuery 基本知识，选择器，事件，DOM操作

时间：2022-02-04 16:11:26

一、基本知识

Jquery是什么？
　　它就是一套JS方法包,jQuery是一个快速，小巧，功能丰富的JavaScript库。它使得HTML文档遍历和操作，事件处理，动画和Ajax更容易使用易于使用的API，可以工作在众多的浏览器。结合多功能性和可扩展性，jQuery已经改变了数百万人编写JavaScript的方式。
二、选择器

JQuery 基本知识，选择器，事件，DOM操作

基本选择器：

　　基本：

　　　　ID选择器：$("#ID")

　　　　Class选择器：$(".Class")　　

　　　　标签选择器：$("标签名")

　　组合：

　　　　并列：用逗号隔开 $("#ID1","#ID2","#ID3","#ID4",...)

　　　　后代：用空格隔开 $(".Class Div")

过滤选择器：

　　基本过滤：

　　　　首尾：  首个：$(".Class:first")   尾个：$(".Class:last")

　　　　等于：  任意个：$(".Class:eq(索引号)") 或者 $(".Class").eq(索引号)   建议使用第二个，例如循环时取索引号方便

　　　　不等于：大于：$(".Class:gt(索引号)")     小于$(".Class:lt(索引号)")    排除：$(".Class:not(.Class:eq(索引号))")

　　　　奇偶：索引号为奇数：$(".Class:odd")      索引号为偶数：$(".Class:even")

　　属性过滤：

　　　　属性名过滤：$(".Class[属性名]")

　　　　属性的名值对过滤：$(".Class[属性名=值]")    $(".Class[属性名!=值]")

　　内容过滤：

　　　　文字：$(".Class:contains("字符串")")

　　　　子元素：$(".Class:has(选择器)")

　　未来元素：

　　　　$("选择器").live("事件名"，function () { });

三、事件

JQuery 基本知识，选择器，事件，DOM操作

　　常规事件

　　　　把JS事件中的on去掉即可；

　　　　复合事件：

　　　　　　$("选择器").hover(function(){},function(){});      相当于把mouseover()mouseout()合二为一

　　　　　　$("选择器").toggle(function(){},function(){},function(){},...);    点击事件循环执行

　　事件冒泡

　　　　阻止事件冒泡：在事件结束前加上 return false;   例如：

 $("#id").click(function () {

        alert("");

        return false;

    });

四：DOM操作

JQuery 基本知识，选择器，事件，DOM操作

　　操作属性

　　　　获取属性  var s=$("选择器").attr("属性名");

　　　　设置属性  $("选择器").attr("属性名","属性值");

　　　　删除属性  $("选择器").removeAttr("属性名");

　　操作样式

　　　　操作内联样式     获取样式  var s=$("选择器").css("样式名");      设置样式  $("选择器").css("样式名","值");

　　　　操作样式表的class   添加class   $("选择器").addClass("class名");

　　　　　　　　　　　　　 移除class   $("选择器").removeClass("class名");

添加移除交替class   $("选择器").toggleClass("class名")

　　操作内容
　　　　表单元素     取值： var s=$("选择器").val();     赋值：  $("选择器").val("值");

　　　　非表单元素   取值： var s=$("选择器").html();  var s=$("选择器").text();     赋值：  $("选择器").html("内容");   $("选择器").text("内容");

　　操作相关元素

　　　　查找    父级：$("选择器").parent();    $("选择器").parents("选择器");

　　　　　　　 子级：$("选择器").children("选择器");    $("选择器").find("选择器");

　　　　　　　 平级：前面的：$("选择器").prve();    $("选择器").prveAll("选择器");

　　　　　　　　　　 后面的：$("选择器").next();    $("选择器").nextAll("选择器");

　　操作

　　　　新建： var s=$("Html字符串");

　　　   添加： 内部添加：$("选择器").append($("Html字符串"));

　　　　　　　 平级之前添加：$("选择器").before($("Html字符串"));

　　　　　　　 平级之后添加：$("选择器").after($("Html字符串"));

　　　　移除：清空内部所有元素： $("选择器").empty();    移除元素本身包含内部的元素： $("选择器").remove();

　　　　复制：var s=$("选择器").clone();

五、动画

JQuery 基本知识，选择器，事件，DOM操作

相关文章