JQUERY基础笔记

2022-10-16 19:26:10

Jquery 是一个 Javascript 库，它极大的简化了 Javascript 编程，基本结构为：

// 基 本 结 构
 $(document).ready(function() { 
         //do something 
     })
    // 简洁写法 1 ：
  $(function() {
        //do something 
      })
        // 简 洁 写 法 2 ：
  $().ready(function() {
   //do something 
  })

window.onload 与 $(document).ready(function(){})的区别

$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完。所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。

两者最大的区别，就是DOM加载完之后，不必再去等相应的图片文字视频等等内容加载完就可以执行JS代码了。
一、选择器、事件、隐藏、显示、淡入、淡出

$(function() {
  // 选 择 器 、 事 件 、 隐 藏 、 显 示 、 淡 入 淡 出 
         $(‘button‘).click(function() 
               { if (flag) {
                    $(‘.p1‘).hide(200);
                    $(‘.p2‘).fadeOut(500);
                     flag = false;
         } else {
                  $(‘.p1‘).show(200);
                  $(‘.p2‘).fadeIn(500);
                         flag = true; 
                   } 
        })
})

二、动画
简单动画：

$(‘#startAnimate‘).click(function() {
                      $(‘#box‘).animate({
                               left: ‘250px‘, 
                               top: ‘250px‘, 
                               opacity: ‘0.5‘,
                                width: ‘+=250px‘, // 绝 对 值

动画队列：

$(‘#animateList‘).click(function() { 
                  var d = $(‘#box2‘); 
                   d.animate({
                         height: ‘300px‘, 
                         opacity: ‘0.4‘ 
                  }, "slow"); 
                   d.animate({ 
                          width: ‘300px‘, 
                           opacity: ‘0.8‘ 
                  }, "slow");
                  d.animate({ 
                           height: ‘100px‘, 
                           opacity: ‘0.4‘
                   }, "slow"); 
                  d.animate({
                            width: ‘100px‘, 
                            opacity: ‘0.8‘ 
                   }, "slow"); 
})

三、JQuery DOM 操作
1.JQuery使用三种方式来获取 DOM的内容，text()、html()以及val()。

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

$(‘#getTxt‘).click(function()
         { alert($(‘.p1‘).text()); 
})
$(‘#getHtml‘).click(function() 
         { alert($(‘.p1‘).html());
 }) 
$(‘#getVal‘).click(function() 
          { alert($(‘#txtVal‘).val()) ;

2. 属性的获取：

$(‘#getAttr‘).click(function()
     { alert($(‘a‘).attr(‘href‘)) ;
 })

3 . 设置内容和属性：

$(‘#setText‘).click(function() { 
        $(‘.setText‘).text(‘Hello World‘); 
})
 $(‘#setHtml‘).click(function() {
        $(‘.p3‘).html(‘<b>Hello world!</b>‘);
 }) 
$(‘#setVal‘).click(function() {
        $(‘.input4‘).val(‘设置val之后‘); 
})
$(‘#setAttr‘).click(function() {
         $(‘a‘).attr(‘href‘, ‘http://www.runoob.com/jquery‘); 
         $(‘a‘).text(‘菜鸟教程‘); 
})

4. 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("#btn1").click(function() { 
          $("p").append(" <b>追加文本</b>。");
 });
$("#btn2").click(function() {
           $("ol").append("<li>追加列表项</li>");
 }); 
$("#btn3").click(function() {
            $("p").prepend("<b>在开头追加文本</b>。 "); 
}); 
$("#btn4").click(function() {
            $("ol").prepend("<li>在开头添加列表项</li>"); 
}); 
$("#btn5").click(function() { 
            $(".img").before("<b>之前</b>");
 });
$("#btn6").click(function() {
            $(".img").after("<i>之后</i>");
 })；

5. 删除元素
1) 删除元素

$(‘#removeDom‘).click(function() {
           $(‘#div1‘).remove();
 }）

2) 清空内容

$(‘#emptyDom‘).click(function() { 
               $(‘#div1‘).empty();
 })

6. 获取并设置 CSS类
1) 添加CSS类

$(‘#addClass‘).click(function() { 
          $(‘h1, h2‘).addClass(‘setFontSize‘);
 })

2) 删除CSS类

$(‘#removeClass‘).click(function() {
           $(‘h1, h2‘).removeClass(‘setFontSize‘);
 })

3) 切换CSS类
该方法对被选元素进行添加/删除类的切换操作

$(‘#toggleClass‘).click(function() { 
         $(‘h1, h2‘).toggleClass(‘setFontSize‘);
 })

7. JQuery设置 CSS

$(‘h1‘).css(‘color‘, ‘#ff0000‘);
$(‘h2‘).css({ 
               ‘color‘: ‘#ff0000‘,
               ‘font-size‘: ‘72px‘ 
})

JQUERY基础笔记

码农公寓

相关文章