JQuery学习

已于 2022-09-28 14:08:37 修改
阅读量162 收藏 1
点赞数 1
分类专栏： javacript 文章标签： jquery 学习 javascript
于 2022-09-28 14:00:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48927323/article/details/127086547
版权
  • 一、JQuery 核心函数 $()
  • 二、JQuery 对象和 Dom 对象
  • 三、JQuery 选择器
    • 3.1 基本选择器
    • 3.2 层级选择器
    • 3.3 过滤选择器
  • 四、JQuery 的属性操作
  • 五、JQuery 练习
  • 六、CSS样式操作
  • 七、JQuery 事件操作

一、JQuery 核心函数 $()

$是JQuery的核心函数，能完成JQuery的很多功能。$()就是调用$这个函数

  1. 传入参数为函数时：$( function(){} );功能跟window.onload一样，都是页面加载完成之后
  2. 传入参数为HTML字符串时，创建一个标签对象
  3. 传入参数为选择器字符串时：$(“#id”)，根据id查询标签对象
  4. 传入参数为DOM对象时：$(this)，返回JQuery对象

二、JQuery 对象和 Dom 对象

Dom 对象

  1. 通过getElementById()查询出来的标签对象
  2. 通过getElementsByName()查询出来的标签对象
  3. 通过getElementsByTagName()查询出来的标签对象
  4. 通过createElement()方法创建的对象

JQuery 对象

  1. 通过JQuery提供的API创建的对象
  2. 通过JQuery包装的Dom对象
  3. 通过JQuery提供的API查询到的对象

    JQuery对象本质：JQuery对象是一个Dom对象的数组 + JQuery的一系列功能函数的总和。

① dom 对象转化为 JQuery 对象

  1. 先有dom对象：var divObj = document.getElementById("testDiv");
  2. 通过核心函数转成JQuery对象：$( divObj );

② JQuery对象转为 dom 对象

  1. 先有JQuery对象
  2. 通过下标取出需要的dom对象

三、JQuery 选择器

3.1 基本选择器

  • #ID选择器：根据id查找标签对象
  • .class选择器：根据class查找标签对象
  • element选择器：根据标签名查找标签对象
  • *选择器：表示任意的，所有的元素
  • selector1，selector2组合选择器：合并选择器1，选择器2的结果并返回

3.2 层级选择器

  • ancestor descendant：后代选择器 ，在给定的祖先元素下匹配所有的后代元素
  • parent > child：子元素选择器，在给定的父元素下匹配所有的子元素
  • prev + next：相邻元素选择器，匹配所有紧接在prev元素后的next元素
  • prev ~ sibings：之后的兄弟元素选择器，匹配prev元素之后的所有siblings元素

3.3 过滤选择器

① 基本过滤器

  • :first：获取第一个元素
  • :last：获取最后个元素
  • :not(selector)：去除所有与给定选择器匹配的元素
  • :even：匹配所有索引值为偶数的元素，从 0 开始计数
  • :odd：匹配所有索引值为奇数的元素，从 0 开始计数
  • :eq(index)：匹配一个给定索引值的元素
  • :gt(index)：匹配所有大于给定索引值的元素
  • :lt(index)：匹配所有小于给定索引值的元素
  • :header：匹配如 h1、h2、 h3之类的标题元素

  • :animated：匹配所有正在执行动画效果的元素

//选择没有执行动画的最后一个div
$(“#btn11”).click(function(){
  $("div:not(':animated'):last").css("background", "#bbffaa");
});

② 内容过滤器

  • :contains(text)：匹配包含给定文本的元素
  • :empty：匹配所有不包含子元素或者文本的空元素
  • :parent：匹配含有子元素或者文本的元素
  • :has(selector)：匹配含有选择器所匹配的元素的元素

③ 属性过滤器

  • [attribute]：匹配包含给定属性的元素
  • [attribute=value]：匹配给定的属性是某个特定值的元素
  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
  • [attribute^=value]：匹配给定的属性是以某些值开始的元素
  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素
  • [attribute*=value]：匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用

案例：

// 选取含有title属性值, 且title属性值不等于test的div元素
$("#btn8").click(function() { 
    $(“div[title][title!=‘test’]”).css(“background”, “#bbffaa”);
});

④ 表单过滤器

  • :input：匹配所有input、textarea、select和button元素
  • :text：匹配所有文本输入框
  • :password：匹配所有的密码输入框
  • :radio：匹配所有的单选框
  • :checkbox：匹配所有的复选框
  • :submit：匹配所有提交按钮
  • :image：匹配所有img标签
  • :reset：匹配所有重置按钮
  • :button：匹配所有input type=button <button>按钮
  • :file：匹配所有input type=file文件上传
  • :hidden：匹配所有不可见元素display:none或input type=hidden

 注意：若要获取下拉框的元素，直接用$(“:selected”)

案例：

// 获取多选框，每个选中的value值
$("#btn4").click(function(){ 
    $(":checkbox:checked").each(function(){ 
        alert(this.value);
    });
});
// 获取下拉框选中的内容
$("#btn5").click(function(){ 
    $(":selected").each(function(){ 
        //此时获取的是option
        alert(this.innerHTML);
    });
});

⑤ 表单对象属性过滤器

  • :enabled：匹配所有可用元素
  • :disabled：匹配所有不可用元素
  • :checked：匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
  • :selected：匹配所有选中的option

注：visible：可视；hidden：隐藏

⑥ JQuery 元素筛选

-eq()：获取给定索引的元素，和:eq()功能一样
-first()：获取第一个元素，和:first功能一样
-last()：获取最后一个元素，和:last功能一样
-filter(exp)：留下匹配的元素，进一步过滤
-is()：判断是否匹配给定的选择器，只要有一个匹配就返回true
-has(exp)：返回包含有匹配选择器的元素的元素，和:has()功能一样
-not(exp)：删除匹配选择器的元素，和:not()功能一样
-children(exp)：返回匹配给定选择器的子元素parent> children
-find(exp)：返回匹配给定选择器的后代元素、祖先、后代
-next()：返回当前元素的下一个兄弟元素prev+next后面一个
-nextAll()：返回当前元素后面所有的兄弟元素prev ~ siblings后面全部
-nextUntil()：返回当前元素到指定匹配的元素为止的后面元素
-parent()：返回父元素
-prev(exp)：返回当前元素的上一个兄弟元素prev+next相反，
-prevAll()：返回当前元素前面所有的兄弟元素prev ~ siblings相反，前面全部
-prevUnitl(exp)：返回当前元素到指定匹配的元素为止的前面元素nextUntil()相反
-siblings(exp)：返回所有兄弟元素
-add()：把add匹配的选择器的元素添加到当前jquery对象中

案例：

// 在div中选择索引为偶数的
$("#btn4").click(function(){ 
    $(“div”).filter(":even").css(“background-color”,"#bfa");
});
// 选择div中class不为one的
$("#btn7").click(function(){ 
    $(“div”).not(".one").css(“background-color”,"#bfa");
});
// 在body中选择所有class为one的div子元素
$("#btn8").click(function(){ 
    $(“body”).children(“div.one”).css(“background-color”,"#bfa");
});
// 在body中选择所有class为mini的div元素
$("#btn9").click(function(){ 
    $(“body”).find(".mini").css(“background-color”,"#bfa");
});
// #one和span之间的元素
$("#btn12").click(function(){ 
    $("#one").nextUntil(“span”).css(“background-color”,"#bfa")
});
// span向前直到#one的元素
$("#btn16").click(function(){ 
    $(“span”).prevUntil("#one").css(“background-color”,"#bfa")
});
// 找到#two所有的div兄弟元素，包括前面的和后面的
$("#btn17").click(function(){ 
    $("#two").siblings(“div”).css(“background-color”,"#bfa")
});
// 选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){ 
   $(“span”).add("#two").css(“background-color”,"#bfa");
});

四、JQuery 的属性操作

Jquery属性操作

  • html()：跟innerHTML一样，设置和获取起始标签和结束标签中的内容
  • text()：跟innerText一样，设置和获取起始标签和结束标签中的文本
  • val()：跟value属性一样，专门用来操作表单项的value属性。（针对value属性值）

val方法同时设置多个表单项的选中状态示例代码：

val方法同时设置多个表单项的选中状态示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript"> $(function() { // val()方法来操作 // val()方法除了可以设置表单项的value属性值之外。 // 还可以批量操作表单项的选中状态 // $(":radio").val(["radio2"]);// 操作单选 // $(":checkbox").val(["checkbox3","checkbox2","checkbox1"]);//批量操作复选框被选中 // $("#multiple").val(["mul1","mul3","mul4"]);// 批量操作多选的下拉列表，多个被选中 // $("#single").val(["sin3"]);// 操作单选的下拉列表，一个被选中 $(":radio,:checkbox,#multiple,#single") .val(["checkbox3","radio2","checkbox2","mul2","mul3","sin2"]); }); </script>
</head>
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2    
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>    
    <br/>
    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>    
</body>
</html>
  • attr()：attr可以设置和获取属性的值
  • prop()：prop可以设置和获取属性的值。

prop方法它可以忽略undefined错误。checked属性、selected属性、disalbed属性，readonly属性，等。这些属性在dom对象中都会有true和false值的情况。并且使用attr操作有返回undefined的情况下。使用prop方法。prop方法只推荐用来操作dom属性中值是true和false的属性。其他的属性都使用attr方法。attr还有它强大的地方。它可以操作非标准的属性（自定义的属性）。

五、JQuery 练习

① 全选，全不选，反选联系

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript"> $(function(){ // 全选 $("#checkedAllBtn").click(function(){ $(":checkbox").prop("checked",true); }); // 全不选 $("#checkedNoBtn").click(function(){ $(":checkbox").prop("checked",false); }); // 反选 $("#checkedRevBtn").click(function(){ // 全部球类的复选框 $(":checkbox[name='items']").each(function(){ // 在遍历的each方法的function函数中，有一个this对象， // 这个this对象是当前正在遍历到的dom对象 this.checked = !this.checked; }); // 需要检查一下，是否全部的球类复选框都选中了 // 如果都选中了，设置【全选/全不选 】也选中，反之亦然 // 获取全部的球类的个数 var allCount = $(":checkbox[name='items']").length; // 获取选中的球类的个数 var checkedCount = $(":checkbox[name='items']:checked").length; if (allCount == checkedCount) { // 全选啦 $("#checkedAllBox").prop("checked",true); } else { // 还没选满 $("#checkedAllBox").prop("checked",false); } }); // 提交按钮 $("#sendBtn").click(function(){ // 选中的全部和复选框 $(":checkbox[name='items']:checked").each(function(){ alert(this.value); }); }); // 给【全选/全不选 】复选框绑定单击事件 $("#checkedAllBox").click(function(){ // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象 // 1 获取【全选/全不选 】的选中状态 // alert( this.checked ); // 2 把【全选/全不选 】的选中状态。设置给全部的球类 $(":checkbox[name='items']").prop("checked",this.checked ); }); // 给每一个球类都要绑定单击事件 $(":checkbox[name='items']").click(function(){ // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象 // 需要检查一下，是否全部的球类复选框都选中了 // 如果都选中了，设置【全选/全不选 】也选中，反之亦然 // 获取全部的球类的个数 var allCount = $(":checkbox[name='items']").length; // 获取选中的球类的个数 var checkedCount = $(":checkbox[name='items']:checked").length; if (allCount == checkedCount) { // 全选啦 $("#checkedAllBox").prop("checked",true); } else { // 还没选满 $("#checkedAllBox").prop("checked",false); } }) }); </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>
</body>
</html>

② 从左到右，从右到左练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css"> select { width: 100px; height: 140px; } div { width: 130px; float: left; text-align: center; } </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript"> $(function(){ //【选中添加到右边】单击事件 $("button:eq(0)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(0) option:selected").appendTo( $("select:eq(1)") ); }); //【全部添加到右边】单击事件 $("button:eq(1)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(0) option").appendTo( $("select:eq(1)") ); }); //【选中删除到左边】单击事件 $("button:eq(2)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(1) option:selected").appendTo( $("select:eq(0)") ); }); //【全部删除到左边】单击事件 $("button:eq(3)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(1) option").appendTo( $("select:eq(0)") ); }); }); </script>
</head>
<body>
    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
            <option value="opt07">选项7</option>
            <option value="opt08">选项8</option>
        </select>
        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>
</body>
</html>

③ 动态添加、删除表格记录（重点）

在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript"> // 页面加载完成之后 $(function(){ // 定义删除的函数，重复使用 var deleteAFun = function(){ var $trObj = $(this).parent().parent();//注意此时this是Dom对象 // find 查找后代 var name = $trObj.find("td:first").text(); // confirm是javaScript中提供的一个确认提示框函数， // 它接收的参数就是提示框的提示文本内容 // 这个确认提示框有两个按钮，一个确认，一个取消 // 用户点击确认，就返回true // 用户点击取消，就返回false if( confirm("是否需要删除【" + name + "】吗?") ){ $trObj.remove(); } // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象 // 删除点击所在行 // 不希望跳转怎么办？ // return false 可以阻止元素的默认行为。 return false; } //提交按钮绑定单击事件 $("#addEmpButton").click(function(){ // 获取输入框中，名称，邮箱，工资 var nameText = $("#empName").val(); var emailText = $("#email").val(); var salaryText = $("#salary").val(); // 创建一个行对象 var $trObj = $("<tr>" + "<td>" + nameText + "</td>" + "<td>" + emailText + "</td>" + "<td>" + salaryText + "</td>" + "<td><a href=\"deleteEmp?id=003\">Delete</a></td>" + "</tr>");//如果不换行就不需要拼接 // 找到创建出来的a标签，再给它绑定单击事件 $trObj.find("a").click(deleteAFun); // 添加表表格中 $trObj.appendTo( $("#employeeTable") );//这个apppend方法后面可以是content也可以是$(“content”) }); // 给删除的a标签绑定单击事件 $("a").click( deleteAFun ); }); </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

六、CSS样式操作

  • addClass()：添加样式
  • removeClass()：删除样式
  • toggleClass()：有就删除，没有就添加

  • offset()：设置和获取标签和坐标

$(‘#btn04’).click(function(){

//offset() - 返回第一个匹配元素相对于文档的位置。
var os = $divEle.offset();
//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
alert("顶边距："+os.top+" 左边距："+os.left);
//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
//offset({ top: 10, left: 30 });
 $divEle.offset({ 
     top:50,
     left:60
 }); 
});

七、JQuery 事件操作

$(function(){})和window.onload = function(){}的区别？

①触发时间？

jquery页面加载完成之后的触发时间点：jquery的页面加载完成之后。只是等浏览器内核解析完html标签，创建好dom对象之后。就马上执行了。

原生js页面加载完成之后的触发时间： 原生js除了要等浏览器内核解析完标签，创建好dom对象之外，还需要等页面中所有元素去准备好自己显示时需要的数据。完成之后才会执行。

② 他们触发的顺序？

jquery的页面加载完成之后先执行，js原生的页面加载完成之后后执行。

③他们执行的次数？

原生js只会执行最后一次的赋值函数。

而jquery的页面加载完成之后，会把所有注册了函数都按照注册的顺序，依次全部执行。

JQuery 事件

  • click()：绑定单击事件，触发单击事件
  • mouseover()：绑定鼠标移入事件
  • mouseout()：绑定鼠标移出事件
  • bind()：可以同时给标签绑定一个或多个事件
  • one()：给标签绑定只响应一次的事件
  • live()：live可以给匹配了选择器的所有元素都绑定事件，哪怕这个元素是后面动态创建的
  • unbind()：跟bind做相反的操作，解除绑定事件

事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

如何阻止事件冒泡呢？在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

SwaryLA
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 加减乘除计算
weak1003的博客
05-17 3627
本次实现jQuery加减乘除的运算效果 开发工具与关键技术：Visual Studio 2015 JavaScript 当然 首先还是先写出大概样式如下图： 下图便是在页面加载完成的样式： 之后便是添加点击是事件 获取文本值内容 再进行判断 如下图： 说道这 不得不说很多人在用JjQuery获取页面的值进行加法运算的时候会发现 1+1是等于11而不是等于2 如下图我的： 引起这样的情况是因为在获取页面的值的时候获取到的是一个字符串而不是整数 在进行运算的时候...
jQuery学习笔记
06-23
本资源所有文档都是html页面，包括我自己正在自学jQuery知识的时候记录的笔记。
jQuery实战——jQuery本质是一个javascript函数
吴圩在CSDN的博客
08-18 1429
jQuery的调用方法有两种，一个是jQuery（）一个是$（）。使用时多用$（），此文在需要的地方，尽量用jQuery这一直观的名称。 一般情况下，两者的作用是一样的，都是调用jQuery框架。 jQuery做了一个javascript的一个框架，本质是一个javascript函数。从其调用方法即可看出： jQuery(document).ready(function(){ /
jQuery超详细总结(2)，JavaScript的算数运算符与比较运算符
最新发布
m0_56175058的博客
03-17 686
获取html()只能获取第一个元素的超文本内容text()能获取元素集合内所有元素的文本内容合val()只能获取第一个元素的 value 值设置html()给元素集合内所有元素设置超文本内容text()给元素集合内所有元素设置文本内容val()给元素集合内所有元素设置 value 值四 元素类名操作addClass()添加类名执行这个方法会给元素集合里面所有的元素添加上固定的类名如果有就不添加, 不存在这个类名时添加移除类名执行这个方法删除 元素集合里面所有元素 的指定类名切换类名。
jQuery的加法运算
江江的博客
06-06 7030
jQuery 常规的是： var num1 = 123; var num2=123; var total = num1+num2; 这个想必大家一看都知道结果了246，没错结果是这个。 那如果这样： <input type="text" id="txt1" value="123" /> <input type="text" id="txt2" value="12...
JQuery学习网站
03-16
NULL 博文链接：https://lxy19791111.iteye.com/blog/163447
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
jquery学习
04-17
jquery学习
jQuery学习资料
01-31
jQuery学习资料，包含多个jquery的学习资料，适合初中级学习文档
JQuery金额加法运算
小划乐的博客
08-17 4227
需求：        后端传过来的数据是带千分位且保留两位小数的金额，要在前端做加法运算，并仍以千分位且保留两位小数的形式展示。 一、两个字符串相加 var a = '12,345.67'; var b = '76,543.21'; var c = a + b ; console.log(c); 结果是字符串拼接：12,345.6776,543.21 二、字符串转数字后...
jQuery 的本质到底是什么？
奔跑的Q
03-02 2950
jQuery-是轻量级的js库 ，（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用的标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详
反斜杠“\”与斜杠“/” 的区别
yiguang_820的博客
06-16 4万+
“＼”与“／”的区别为：用途不同、系统不同、网址不同。 一、用途不同 1、“＼”：“＼”只能用来表示目录。 2、“／”：“／”技能作为除法符号或者间隔符号使用，也能用来表示目录。 二、系统不同 1、“＼”：“＼”用作目录时，适用于windows系统。 2、“／”：“／”用作目录时，适用于unix系统。 三、网址不同 1、“＼”：“＼”不能用于网址（URL）中。 2、“／”：在网址（URL）中，“／”可作为请求目录。 ......
JQ加减乘除运算
weixin_30462049的博客
08-31 1936
jq下进行加减乘法运算： //加法运算 function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString()...
反斜杠“\”的几个用法！
热门推荐
罗小白的博客
08-05 11万+
我们都知道“\”可以与字母组合，具有特殊含义，如下： 　　\’ 　　 单引号 \” 　　 双引号 　　\ 　　 反斜杠 　\0 　　　空（字符串最后一个字符，默认为空） 　　\a 　　 警告 　　\b 　　 退格 　　\f 　　 换页 　　\n 换行 　　\r 　　 回车 \t ...
scala中:: , +:, :+, :::, +++的区别
11-02 2万+
初学scala的人都会被Seq的各种操作符所confuse。下面简单列举一下各个Seq操作符的区别。 4种操作符的区别和联系 :: 该方法被称为cons，意为构造，向队列的头部追加数据，创造新的列表。用法为 x::list,其中x为加入到头部的元素，无论x是列表与否，它都只将成为新生成列表的第一个元素，也就是说新生成的列表长度为list的长度＋1(btw, x::list等价于
斜杠‘/‘ 和反斜杠‘\‘
顺其自然~专栏
03-01 2万+
1.从名字上区分 我相信很多人都分不清名称和符号的对应关系，“斜杠”、“反斜杠”和“/”、“\”。 用英文名记：/: forward slash，向前的斜杠，就像一个人向前倾；\: backward slash，向后的斜杠（反方向），就像一个人往后倒。 中文近似义：/: 斜杠- 撇斜杠；\: 反斜杠 - 捺斜杠。 2.背景说明 只从计算机编程角度讲，在Unix系统中，使用了斜杠/作为路径分隔符，因为web最早是在Unix上跑的，所以URL也是使用/作为目录分隔...
“\”与“/”斜杠与反斜杠的区别
极品小肥羊的博客
07-15 8619
有时，在“我的电脑”中输入文件夹路径的时候要用“\”而在IE浏览器中输入网址的时候就需要用“/”。这两者有什么具体的区别？希望把他们所以的用途都说一下。要具体一点，谢谢！ 兄弟：要谈到斜杠与反斜杠的区别;就得先从源头说起: UNIX 操作系统设计了这种路径分隔法，它使用反斜杠：/。由于网络是首先应用在 UNIX 计算机之间的，至今为止，一半以上的网络服务器仍是使用UNIX 操
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值