Jquery学习

it2026-03-25 0

jQuery

一个快捷的，轻便的JavaScript框架。

jquery支持css选择器。

jquery可以使用下载的js文件，也可以使用CDN。

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

例如：

设计思想

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div class="div1"> </div> </body> <script> $(function(){ $(".div1").css("background-color","red"); }) </script> </html> //获取奇数的li标签 $("li:even").css("background-color","red"); //获取偶数的li标签 $("li:odd").css("background-color","red"); //获取第二个li标签 $("li:eq(2)").css("background-color","red"); //以下的两种方法都可以改变li标签中class为box的css样式 $("li.box)").css("background-color","red"); $("li").filter('.box').css("background-color","red");

jquery的链式操作

$(function(){ $('h1').click(function(){ alter("单机"); }).css("background-clock",'red').mouseenter( function(){ this.style.backgroudColor='bule'; } ).mouseout(function(){ this.style.backgroudColor='green'; }) })

取值赋值合体

$(function(){ //jquery的取值操作 alert($('#div').html()) //jquery的赋值操作 $('#div').html("<h2>我是新赋值的内容</h2>") })

Jquery的方法

filter not has 方法

//filter 过滤对已经获取的的网页元素进行过滤 //not filter的反义词 //has 拥有，直接判定子节点中是否含有满足条件的元素 $(function(){ //获取div中含有class为box的对象 $("div").filter('.box').css("background-color",'red'); //获取div中不含class为box的对象 //判断子节点中是否含有class为box的元素 $("div").has('.box').css("background-color",'red'); })

prev，next方法

//prev 当前兄弟节点中的上一个节点 //next 当前兄弟节点中的下一个节点 //find 查找子节点 <body> <h2></h2> <p></p> <span></span> <h3></h3> <em></em> </body> <script> $(function(){ //查找h3标签的前一个兄弟节点 $("h3").prev().css("background-color",'red'); //查找h3标签的后一个兄弟节点 $("h3").next().css('background-color','blue'); //查找ul中的li标签 $('ul').find('li').css('background-color','orange'); }) </script>

index和eq方法

//index()获取在兄弟节点的下标 //eq(下标) 通过下标获取指定的元素节点 $(function(){ alert($('h3').index()); $('li').eq(3).css('background-color','pink'); $('li:eq(2)').css('background-color','pink'); })

attr

//设置和修改行间属性 $(function(){ //获取属性 console.log($('#idv').attr('title')); console.log($('#idv').attr('class')); console.log($('#idv').attr('id')); //修改属性 $("#div").attr('class','box2'); $('#div').attr('title','world'); })

addClass,removeClass

$(function(){ //给class为div1的div添加class，即使重复也不报错 $('#div1').addClass("box2 box3 box4"); //从class为div1的class中去掉box2这个class，不存在也不报错 $('#div1').removeClass('box2'); })

width innerWidth outerWidth

width() 直接是widthinnerWidth() width+paddingouterWidth() width+padding+borderouterWidth(true) width+border+padding+marginheight()innerHeight()outerHeight()

节点操作

inertBefore() before()

insertAfter() after()

appendTo() append()

prependTo() prepend()

remove()

$(function(){ //找到span标签将其插入到div的前面 $('span').insertBefore($('div')); $('div').brefore('span') //找到div节点，将其插入到span的后面 $("div").insertAfter($('span')); //找到span节点，插入到div节点的子节点末尾 $('span').appendTo($('div')); //找到span节点，将其插入到div节点的首位 $('span').prependTo($('div')); //删除div节点 $("div").remove(); })

事件绑定

on off

on的用法

$(function(){ //给一个事件添加一个函数 $("#div").on('click',function(){ alert('hello'); }) //同时给多个事件添加同一个函数，使用空格分开 $('div').on("click mouseover",function(){ // 方法体 }) $('div').on({ click:function(){ alert("点击"); }, mouseover:function(){ alert("mouseover"); } }) })

事件委托

$(function(){ //第二个参数是触发对象的选择器 $('ul').on("click",'li',function(){ $(this).css('background-color','red'); }) })

off的用法

$(function(){ //取消div1上的所有事件上的所有函数 $('#div1').off(); //取消某一事件下的所有函数 $('#div1').off('click'); //取消某一事件下的指定的函数 $('#div1').off('click',show); })

ev.stopPropagation();阻止事件冒泡

ev.preventDefault();阻止默认行为

最新回复(0)