JQuery

最新推荐文章于 2022-04-28 10:33:03 发布

雨落风暖晴

最新推荐文章于 2022-04-28 10:33:03 发布

阅读量105

点赞数

分类专栏： java 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43490398/article/details/105000632

版权

java 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

“$”就是jQuery当中最重要且独有的对象：jQuery对象

var btn=$('#btn');
btn.css('background','red');
//css()这个方法调用完毕，返回的还是Jquery对象，可以链式编程。
$('#btn').css('background','red').css('font-size','50px').css('width','100px');

加载模式

//onload这种方式，是我们原生JS的方式。
  /*  window.οnlοad=function(){
    $('#btn').css('background','red').css('font-size','50px').css('width','100px');
   } */
   //Jquery也有自己的方式，等待整个文档加载完毕去执行，我们就使用Jquery的方式。
   /* $(document).ready(function(){
    
    $('#btn').css('background','red').css('font-size','50px').css('width','100px');
   
   }); */
   //上面这个等待html文档加载完毕再去执行的写法，有一个简写形式。
   $(function(){
    $('#btn').css('background','red').css('font-size','50px').css('width','100px');
   });

<button id="btn" type="button">一个按钮</button>

原生DOM与JQuery对象互转

//原生的方式 获取原生的DOM对象 JS原生对象，你就用原生对象的属性和方法，不能用Jquery的，用了也效果。
    var btn=document.getElementById("btn");
    btn.style.background="red";


//原生的DOM对象 转换成Jquery的对象 使用 $(原生DOM对象) 包裹一下。
    var btn2=document.getElementById("btn2");
    //你只需要把元素DOM对象，使用$(原生DOM对象) 包裹一下。
    $(btn2).css('width','200px').css('background',"yellow");


//把Jquery对象转换成原生的DOM对象。使用Jquery中的get(索引)
var ysDiv=$('#div1').get(0);
    ysDiv.style.color="yellow";

DOM操作

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<h1 id="myh">aaaa</h1>
  <h1 id="myh2">bbbb</h1>
  <input type="text" id="" value="abc" />
  //
  //html()
  //text()
  //val() 针对input标签的
  $('#myh').text("这是一行标签"); //相当于原生JS的 innerText;
  //追加
  //$('#myh').text($('#myh').text()+"这是一行标签");
  $('#myh2').html("<p>这是文本</p>");//相当于原生JS 的 innerHTML
  var name=$('input').val();
  alert(name);

<style type="text/css">
   .myh4{
    color:blue;
   }
   .hehe{
    font-size: 100px;
   }
  </style>
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<h1 id="myh" align="center">aaaa</h1>
  <h1 id="myh2">bbbb</h1>
  <h1 id="myh3">bbbb</h1>
  <h1 id="myh4">cccccc</h1>
  <button type="button">切换样式</button>
  //
  //设置或获取属性的值
  $('#myh').attr('align','right').attr('style','color:red;font-size:50px');
  var json={
    'align':'center',
    'style':'color:red;font-size:50px'
  }
  $('#myh2').attr(json);
  $('#myh2').removeAttr("style"); 
  //css()给元素设置样式的方法，可以连缀使用
  $('#myh3').css({
   color:'yellow',
   // 注意css属性名如果有 -连接，把-去掉,把 -后面的第一个字母变大写
   fontSize:'200px'
  });



//给标签添加class属性，专用的方法
  //$('#myh4').addClass('myh4 hehe');
  //给标签添加任何属性。
  //$('#myh4').attr('class','myh4');
  $('button').click(function(){
   //切换默认样式和设置的样式
   $('#myh4').toggleClass('myh4 hehe');
  })

选择器对应的方法

<div id="div1">
   <h1>aaaaa</h1>
</div>
<p>ppppppp</p>
<h3>3333333333</h3>

//$('div >h1').css('color','red');
$('#div2').children('h1').css('color','red')        
$('p').next('h3').css('color','yellow');
$('p').nextAll('h3').css('color','yellow');

 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 //
<ul>
   <li class="myli">aaaa</li>

  </ul>
  //
  //针对上面三个选择器，Jquery有对应的方法
  $('li').first().css('color','red');
  $('li').last().css('color','red');
  $('li').eq(2).css('color','red');
  //get()返回的是原生的DOM对象
  $('li').get(3).style.color='yellow';

循环方法

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<ul>
   <li class="myli"></li>
   </ul>
   //
 $('li').text("这是一个列表项").width(300).height(100);
  //Jquery each() 方法可以用来遍历
  $('li').each(function(index,ele){
   //alert(index+"==="+ele);
   //注意的是：迭代的元素，是原生的DOM对象
   //$(ele).css('font-size','100px');
   if(index%2==0){
    $(ele).css('background','green');
   }else{
    $(ele).css('background','yellow');
   }
  })
  //$.each() 可以遍历JS元素的数组
  //$.each(原生JS数组对象,function(索引，当前元素){})
  var arr=[100,200,300,400];
  $.each(arr,function(index,ele){
   alert(index+"==="+ele);
   })

节点操作
//创建节点
var ele=$(‘

一行标签

’);
//站在父标签的角度，把子标签添加到我的里面去,默认是往后面加
$(‘body’).append(ele);

(^{'} b o d y^{'}) . a p p e n d (^{'} < h 1 > 一 行 标 签 < / h 1 >^{'}); / /

(‘body’).html(‘

一行标签

’);
//站在子标签的角度，把我添加到父标签里面去
//ele.appendTo($(‘body’));
$(‘body’).prepend(“

一行标签

”)

var firstH=$(’#myh’);
firstH.after(‘

22222222

’);
firstH.before(‘

22222222

’);

//兄弟关系的节点移动，把h1标签，移动到div的下面
$(^{'} h 1^{'}) . i n s e r t A f t e r ($ (‘div’));
//兄弟关系的节点移动，把h2标签，移动到div的上面
$(‘h2’).insertBefore(‘div’);

//给每一个 h1 外部，都包裹了一个div
//都是站在子标签的角度
$(‘h1’).wrap(’

’);
//给所有的h2标签整体包裹一个div
$(‘h2’).wrapAll(’

’);
//去掉h2外部包裹的标签
$(‘h2’).unwrap();
//给div里面的子元素外面，包裹一个div
$(‘div’).wrapInner(’

’);

// $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').html("")\dots$ (’#div1’).empty();
//干掉自己
$(’#div1’).remove();
//干掉自己与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(‘h2’).detach();

事件的绑定

//绑定事件 bind() 需要注意的是 bind() unbind() 这两个方法，已经在Jquery3.0版本以上移除了
  $('button').bind('click',function(){
   alert("OK");
  });
  //解绑事件 unbind()
  $('button').unbind();

//事件的简写方式，针对某些事件，都提供了响应的方法，命名规则就是  事件名(事件的处理函数)
  //e接收事件对象
  //针对事件对象，Jquery对事件对象，并没有做任何处理，我们可以直接使用JS里面事件对象的属性和功能
  $('button').click(function(e){
   alert("aaaa");
   alert(e.type);
   alert(e.target);
  });
  /* $('div').mouseover(function(){
   //注意this代表的是这个原生的dom对象，你使用Jquery包裹一下，让他变成Jquery对象
   $(this).css('background','yellow');
  })
  $('div').mouseout(function(){
   //注意this代表的是这个原生的dom对象，你使用Jquery包裹一下，让他变成Jquery对象
   $(this).css('background','blue');
  }) */

事件自动触发

//自动触发事件，需要调用方法trigger(); 获取 triggerHandler('click')
  $('button').triggerHandler('click'); */
  //事件自动触发简写
  $('button').click(function() {
   alert("abcc");
  }).trigger('click');

推荐方式绑定事件

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<button type="button">按钮</button>
  <input type="button" value="按钮222"/>
  //
  //有时我们不用事件的简写，那么就用推荐的这个on() off() one() 来进行事件的绑定和解绑
  $('button').on('click',function(){
   alert("谈了");
  }).on('mousedown',function(){
   $(this).css('background','red');
  }).on('mousemove',function(){
   $(this).css('background','yellow');
  });
  //解绑事件
  //$('button').off(); //不给参数，移除元素上面绑定的所有事件
//根据事件名移某个事件
  $('button').off('mousedown');
  //这个事件只触发一次
  $('input[type=button]').one('click',function(){
   alert("hehe");

主要问题

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<ul>
   <li>aaa</li>
   <li>bbb</li>
   <li>cccc</li>
   <li>dddd</li>
   <li>eeee</li>
  </ul>
  <ol>
  </ol>
//
//用简写来绑定，那么你就要直接绑定到，你要操作的元素上
  // $('ul li').click(function(){
  //  $(this).css('color','red');
  // });
  //on() 方法来绑定，他可以把事件绑定到ul上，但是触发的时候，是里面li触发的。
  $('ul').on('click', 'li', function() {
   $(this).css('color', 'red');
  })

   //事件委托，把未来才有的子元素的事件，先委托给父元素，将来子元素有了，就可以使用这个事件了
  $('ol').on('click', 'li', function() {
   alert("hehehhe")
  });
  
  var li = $('<li>1111111111111111111111</li>');
  $('ol').append(li)

雨落风暖晴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

“$”就是jQuery当中最重要且独有的对象：jQuery对象var btn=$('#btn');btn.css('background','red');//css()这个方法调用完毕，返回的还是Jquery对象，可以链式编程。$('#btn').css('background','red').css('font-size','50px').css('width','100px');加载...
复制链接

扫一扫

专栏目录