前端小记——jQuery-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端小记——jQuery。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

jQuery简介

jQuery语法

jQuery加载模式

jQurey选择器

元素选择

文本内容插入

获取输入框的值

设置属性

CSS样式的操作

设置class属性

class切换

节点操作

事件的绑定

事件简写

事件对象

显示隐藏动画

上卷下拉动画

淡入淡出动画

jQuery简介

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

使用之前需要先安装jQuery库文件

jQuery语法

$(selector).action()

jQuery加载模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入JQuery库文件-->
    <script src="js/jquery.js"></script>
    <script>
     /* window.onload = function() {
        $('div').css('width','200px').css('height','200px').css('background','red');
      }*/
     //ready()等文档准备完成之后调用。
    /*  $(document).ready(function (){
        $('div').css('width','200px').css('height','200px').css('background','red');
      })*/
     //简写方式
     $(function (){
       $('div').css('width','200px').css('height','200px').css('background','red');
     })
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

原生DOM对象和jQuery对象互换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入JQuery库文件-->
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <button id="btn">一个按钮</button>
        <button id="btn1">一个按钮</button>
        <button id="btn2">一个按钮</button>
    </body>
    <script>
        //返回的是原生的DOM对象。你就调用原生JS提供的属性和方法，不能调用JQuery提供的属性和方法
        var btnObj = document.getElementById('btn');
        console.log(btnObj);
        btnObj.style.backgroundColor = "red";
        btnObj.style.color = 'white';

        //返回的是JQuery对象
        //JQuery对象 那么你调用JQuery提供的属性和方法，调用不了原生JS的属性和方法。
        var obj = $('#btn');
        console.log(obj);
        obj.css('height', '200px');
        obj.css('width', '200px');


        //原生的DOM对象和JQuery对象的互换
        // 原生的DOM对象--->JQuery对象 $(原生DOM对象)
        $(btnObj).css('font-size', '50px');
        // JQuery对象---->原生的DOM对象 调用JQuery对象提供的get()方法返回原生DOM对象
        var ysDOM = obj.get(0);
        ysDOM.style.border = '5px solid black';



    </script>
</html>

jQurey选择器

1.id选择器

$("#test")

2.class选择器

$(".test"）

3.标签选择器

$(”h1“)

4.子元素

$("div div p")
$("#d1").find("#d2").find("p")

5.兄弟元素

$("h5").next()

$("h5").nextAll()

元素选择

1.第一个元素

$('li').first()

2.最后一个元素

$('li').last()

3.索引元素

$('li').eq(2)

文本内容插入

//原生js Jquery
//innerText text()
//innerHTML html()
$('div').html('<b>Hello</b>');