jQuery使用须知
程序员文章站
2022-03-29 15:14:13
...
这次给大家带来jQuery使用须知,jQuery使用的注意事项有哪些,下面就是实战案例,一起来看一下。
jQuery选择器$("jQuery选择器")
和css选择器一样,可以是.
可以是#
可以是标签
$("p") $(".color") $("#mylove") $("p ul .yellow") $("#color.yellow")
页面准备就绪时
jQuery: $(document).ready(function(){ //your code }); JavaScript: window.onload=function(){ //your code };
监听事件
-
绑定事件
jQuery: $("#click").bind("click",function(){ //jQuery自动判断浏览器类型并做调整 //your code }); JavaScript: var click=document.getElementById("click"); if(window.attachEvent){ click.attachEvent("click",function(){ //IE8或之前 //your code }); }else{ click.addEventListener("click",function(){ //除了IE8或之前 //your code }); }
-
解绑事件
jQuery: //jQuery自动判断浏览器类型并做调整 $("#click").unbind("click"); 删除 click 事件 $("#click").unbind(); 删除所有事件 JavaScript: var click=document.getElementById("click"); click.removeEventListener("click"); //除了IE8或之前 click.detachEvent("click"); //IE8或之前
-
单击
jQuery: $("#click").click(function(){ //your code }); JavaScript: document.getElementById("click").onclick=function(){ //your code };
遍历
-
each()
jQuery: $("p").each(function(){ //your code }); JavaScript: var p=documentElementsByTagName("p"); for(var i in p){ p[i] = //yourcode; };
jQuery集成了很多效果,很好用
slideUP() 向上收起 slideDown() 向下展开 slideToggle() fadeIn(速度/ms) 渐入 $.contains(xxx,yyy); 判断 元素xxx 中是不是有 元素yyy
对元素的操作
-
添加元素
jQuery: $("p").append("<p>hello!</p>"); 直接在 p 后面添加元素 p ,p 的内容为 hello! $("p").append($("#color")); 在 p 后面添加本代码中 id="color" 的元素 JavaScript: var p=document.getElementById("p"); var p=doucment.createElement("p"); p.appendChild(p);
$("p").before("<p>hello!</p>"); //在 p 上(前)面插入 "<p>hello!</p>" $("p").after("<p>hello!</p>"); //在 p 下(后)面插入 "<p>hello!</p>"
$("p").wrap("<a>i`m yellow!</a>"); // <p> 下添加子元素 <a>
-
删除元素
$("p#COLOR").empty(); //empty 方法将元素内容清除,但不删除元素 $("p#color).remove(); //remove 方法直接将元素删除 $("p#color").detach(); //detach 方法将元素删除后暂存在浏览器的内存里, var $L=$("p#color").detach(); //可以将detach赋给一个变量,删除的元素将可以像数组一样存在变量里
-
获取元素
$("#fish").parent(); //id=fish 的元素的父元素 $("#fish").children(); //id=fish 的元素的子元素 $("#fish").prev(); //id=fish 的元素的上(前)一个元素 $("#fish").next(); //id=fish 的元素的下(后)一个元素 $("#fish").parents(); //id=fish 的元素的所有父元素 $("#fish").siblings(); //id=fish 的元素的所有同级元素 $("#fish").closest("ul"); //离 id=fish 最近的 ul $(".fish").first(); //取所有 class=fish 元素中第一个元素 $(".fish").eq(n); //取所有 class=fish 元素中第 n 个元素 $(".fish").last(); //取所有 class=fish 元素中最后一个元素 $(".fish").slice(a,b); //取 class=fish 中 a 和 b 之间的所有元素,不包括 a 和 b $(".fish").filter(); //取 class=fish 里面符合 括号里规则 的所有元素 $(".fish").not(); //取 class=fish 里面不符合 括号里规则 的所有元素 $("#fish").parent().parent().next().remove(); //随意组合 $("#fish").closest("ul").parents(); //随意组合 $(".fish").parents().filter(".yellow"); //随意组合 $(".fish ul").children().not("#yellow"); //随意组合
-
替换元素
$("#fish").replaceWith("<p>hello!</p>"); //把 id=fish 的元素替换成 <p>hello!</p>
this
jQuery: $(this).click(function(){}); JavaScript: this.click=function(){};
对CSS
的操作
jQuery中有addClass
、removeClass
这样的命令来直接对单个CSS类
进行操作
JavaScript有className
、classList
这样的命令,只能对全部CSS类
进行操作
jQuery: $("p").addClass("yellow"); $("p").removeClass("yellow"); JavaScript: p.className= //your code; p.classList.add(""); p.classList.remove("");
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是jQuery使用须知的详细内容,更多请关注其它相关文章!
上一篇: include引入公用代码实现方法
下一篇: 关于js正则表达式详解
推荐阅读
-
JavaEE基础day02 1.定义Java中的变量 四类八种 2.变量定义和使用的注意事项 3.数据类型的转换、强制数据类型转换4.算数运算符、比较运算符、逻辑运算符、赋值运算符、三元运算符
-
jQuery ajax 提交表单图片
-
asp.net core 使用 AccessControlHelper 控制访问权限
-
webpack3、4的基本的使用方法
-
使用Python实现在Windows下安装Django
-
小程序中为什么使用var that=this
-
JQuery 基本使用、操作样式、简单动画
-
htop使用详解
-
jQuery做出菜单导航栏功能
-
MyBatis中使用RowBounds对查询结果集进行分页