jQuery的基础

已于 2023-06-04 09:47:12 修改
阅读量732 收藏
点赞数
文章标签： jquery javascript 前端
于 2023-06-02 16:01:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiu221024/article/details/131002727
版权

一、Jquery的下载与安装 

1.下载 

  • 官网： http://jquery.com/ 下载 
  • 在电脑上安装之后 引入对应的jjQuery.js文件即可 
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

二、Dom对象与jQuery包装集对象 

1.Dom对象 

  • javascript 中获取 Dom 对象，Dom 对象只有有限的属性和⽅法： 
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

2.jQuery包装集对象 

  •  可以说是 Dom 对象的扩充。在 jQuery 的世界中将所有的对象， ⽆论是⼀个还是⼀组，都封装成⼀个jQuery 包装集
var jQueryObject = $("#testDiv");

3. Dom对象 转 Jquery对象 

  • Dom 对象转为 jQuery 对象，只需要利⽤ $() ⽅法进⾏包装即可 
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);

4. Jquery对象 转 Dom对象 

  • jQuery 对象转 Dom 对象，只需要取数组中的元素即可 
// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom
  • 通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象 
$('#mydiv').each(function() {//遍历
 var jquery = $(this); 
});

三、Jquery选择器 

1.基础选择器 

选择器名称举例
id选择器#id$("#testDiv")选择id为testDiv的元素
元素名称选择
器		element$("div")选择所有div元素
类选择器.class$(".blue")选择所有class=blue的元素
选择所有元素*$("*")选择⻚⾯所有元素
组合选择器selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹
配的元素
  • 案例代码： 
<style type="text/css">
 .blue{
 background: blue;
 }
</style>
<body>
 <div id="mydiv1">id选择器1<span>span中的内容</span></div>
 <div id="mydiv2" class="blue">元素选择器</div>
 <span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 // id选择器
 console.log("======id====");
 var idSelecter = $('#mydiv1');
 console.log(idSelecter.html());
 console.log(idSelecter.text());
 // 元素选择器
 console.log("======name====");
 var nameSe = $('div'); // 有多个div元素
 nameSe.each(function(){
 // this是dom对象，$(this)是jquery对象
 console.log($(this).text());
 });
 // 类选择器，class
 console.log("======class====");
 var classSe = $('.blue'); // 有多个class=blue的元素
 classSe.each(function(){
 console.log($(this).text());
 });
 // 通⽤选择器：*
 console.log("======所有元素====");
 var all = $("*");
 console.log(all.length);
 // 组合选择器
 console.log("======组合====");
 var unionSe = $('span, .blue,div');
 unionSe.each(function(){ 
 console.log($(this).text());
 });
</script>

2.层次选择器 

选择器名称举例
后代选择器ancestor descendant$("#parent div")选择id为parent的元素的所有div元素
⼦代选择器parent > child$("#parent>div")选择id为parent的直接div⼦元素
相邻选择器prev + next$(".blue + img")选择css类为blue的下⼀个img元素
同辈选择器prev ~ sibling$(".blue ~ img")选择css类为blue的之后的img元素
  • 案例代码 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>层次选择器</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <style type="text/css">
 .testColor{
 background: green;
 }
 .gray{
 background: gray;
 }
 </style>
 </head>
 <body>
 <div id="parent">层次择器
 <div id="child" class="testColor">⽗选择器
 <div class="gray">⼦选择器</div>
 <img src="http://www.baidu.com/img/bd_logo1.png"3.3. 表单选择器
 width="270" height="129" />
 <img src="http://www.baidu.com/img/bd_logo1.png"
 width="270" height="129" />
 </div> 
 <div>
 选择器2<div>选择器2中的div</div>
 </div>
 </div>
 </body>
 <script type="text/javascript">
 console.log("=========后代选择器-选择所有后代=====");
 var ancestorS = $('#parent div');
 ancestorS.each(function(){
 console.log($(this).text());
 });
 
 console.log("=========⼦代选择器-选择⼉⼦辈=====");
 var child = $('#parent>div');
 child.each(function(){
 console.log($(this).text());
 });
 
 console.log("=========相邻选择器=====");
 var pre_next = $(".gray + img");
 console.log(pre_next.length);
 
 console.log("=========同辈选择器,其后，（弟弟）=====");
 var pre_siblings = $(".gray ~ img");
 console.log(pre_siblings.length);
 </script>
</html>

3.表单选择器 

Forms名称举例
表单选择器:input查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
⽂本框选择器:text查找所有⽂本框：$(":text")
密码框选择器:password查找所有密码框：$(":password")
单选按钮选择器:radio查找所有单选按钮：$(":radio")
复选框选择器:checkbox查找所有复选框：$(":checkbox")
提交按钮选择器:submit查找所有提交按钮：$(":submit")
图像域选择器:image查找所有图像域：$(":image")
重置按钮选择器:reset查找所有重置按钮：$(":reset")
按钮选择器:button:button
:button:button:button
  • 案例代码 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>表单验证</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
 <body>
 <form id='myform' name="myform" method="post"> 
 <input type="hidden" name="uno" value="9999" disabled="disabled"/>
 姓名:<input type="text" id="uname" name="uname" /><br />
 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
 年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
 <input type="radio" name="uage" value="1"/>你懂得 <br />
 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
 <input type="checkbox" name="ufav" value="爬床"/>爬床
 <input type="checkbox" name="ufav" value="代码"/>代码<br />
 来⾃:<select id="ufrom" name="ufrom">
 <option value="-1" selected="selected">请选择</option>
 <option value="0">北京</option>
 <option value="1">上海</option>
 </select><br />
 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
 头像:<input type="file" /><br />
 <input type="image" src="http://www.baidu.com/img/bd_logo1.png"
 width="20" height="20"/>
 <button type="submit" onclick="return checkForm();">提交</button>
 <button type="reset" >重置</button> 
 
 </form>4. Jquery Dom操作
jQuery也提供了对HTML节点的操作，⽽且在原⽣js的基础之上进⾏了优化，使⽤起来更加⽅便。
常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的
值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作
⽅式只适⽤于jQuery对象。
4.1. 操作元素的属性
4.1.1. 获取属性
 </body>
</html>
<script type="text/javascript">
 function checkForm(){
 // 获取 所有的表单元素
 $(":input").each(function(){
 // console.log($(this)[0]);
 console.log($(this)[0].tagName);
 })
 console.log("------+++++++++++++++++++++--------")
 // 获取 text
 console.log("text-->" + $(":text").length); // 1
 // 获取 password
 console.log("password-->" + $(":password").length); // 1
 // 获取radio
 console.log("radio-->" + $(":radio").length); // 2
 // 获取checkbox
 console.log("checkbox-->" + $(":checkbox").length); // 3
 // 获取file
 console.log("file-->" + $(":file").length); // 1
 // 获取按钮
 console.log("button-->" + $(":button").length); // 2
 // 获取submit按钮
 console.log("submit-->" + $(":submit").length); // 1
 // 获取image按钮
 console.log("image-->" + $(":image").length); // 1
 // 获取reset按钮
 console.log("reset-->" + $(":reset").length); // 1
 return false; 
 }
</script>

四、Jquery Dom操作 

jQuery也提供了对HTML节点的操作，⽽且在原⽣js的基础之上进⾏了优化，使⽤起来更加⽅便。
常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的
值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作
⽅式只适⽤于jQuery对象。 

1.操作元素的属性 

获取属性 

⽅法说明举例
attr(属性名称)获取指定的属性值，操作 checkbox 时，
选中返回 checked，没有选中返回 undefined。		attr('checked')
attr('name')
prop(属性名称)获取具有true和false两个属性的属性值prop('checked')
  • 案例代码: 
<form action="" id="myform">
 <input type="checkbox" name="ch" checked="checked"/> aa
 <input type="checkbox" name="ch" /> bb
</form>
 
<script type="text/javascript">
 var ch = $("input[type='checkbox']")
 console.log(ch)
 ch.each(function(idx, em){
 console.log(idx + "-" + $(em) + "=" + this)
 console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
 console.log('--------------')
 })
</script>

设置属性 

⽅法说明举例
attr(属性名称，属性值)设置指定的属性值，
操作 checkbox 时，
选中返回 checked，
没有选中返回 undefined。		attr('checked',’checked’)
attr('name',’zs’)
prop(属性名称，属性值) 设置具有true和false的属性值prop('checked',’true’)

移除属性 

⽅法说明举例
removeAttr(属性名)移除指定的属性removeAttr('checked')
  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>属性操作</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
 <body>
 <pre>
 <h5>1.attr()</h5>⽅法 说明
attr("class") 获取class属性的值，即样式名称
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
4.2. 操作元素的样式
对于元素的样式，也是⼀种属性，由于样式⽤得特别多，所以对于样式除了当做属性处理外还可以有
专⻔的⽅法进⾏处理。
增加元素的具体样式，格式：
 设置或者返回元素的属性 ;
 <h5>2.prop()</h5>
 设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
 </pre>
 <hr />
 <a href="http://www.baidu.com" id="a1">百度</a>
 <a href="http://www.sina.com" id="a2">新浪</a>
 <input type="checkbox" name="all" checked="checked"/>全选
 </body>
 <script type="text/javascript">
 // 获取属性值：attr
 console.log($('#a1').attr('href'));
 console.log($(':checkbox').attr('name'));
 // 若未选中显示undefined，选中显示 checked
 console.log($(':checkbox').attr('checked')); 
 // 获取属性值：prop
 // 若未选中显示false，选中显示 true
 console.log($(":checkbox").prop('checked')); 
 console.log($('#a2').prop('href'))
 // 设置属性值
 $('#a1').attr('href','https://jquery.com');
 $(":checkbox").prop("checked",false);
 // 移除属性
 $('#a2').removeAttr('href');
 </script>
</html>

2.操作元素的样式 

  • 对于元素的样式，也是⼀种属性，由于样式⽤得特别多，所以对于样式除了当做属性处理外还可以有专⻔的⽅法进⾏处理。 
⽅法说明
attr("class")获取class属性的值，即样式名称
attr("class","样式名")修改class属性的值，修改样式
addClass("样式名")添加样式名称
css()添加具体的样式
removeClass(class)移除样式名称
  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>设置元素样式</title>
 <script src="jquery-3.4.1.js" type="text/javascript" ></script>
 <style type="text/css">
 div{
 padding: 8px;
 width: 180px;
 }
 .blue{
 background: blue;
 }
 .larger{
 font-size: 30px;
 }
 .green {
 background : green;
 }
 </style>
 </head>
 <body>
 <h3>css()⽅法设置元素样式</h3>
 <div id="conBlue" class="blue larger">天蓝⾊</div>
 <div id="conRed">⼤红⾊</div>
 <div id="remove" class="blue larger">天蓝⾊</div>
 </body>
 <script type="text/javascript">
 // 获取样式名称
 console.log($("#remove").attr("class"));
 // 修改样式，那么id为remove的元素样式class只有green
 // $('#remove').attr("class","green")
 // 添加样式名称，class名称 --叠加
 // $('#conBlue').addClass("blue larger");
 // 添加元素具体样式
 // { "":"" , "":"" } 名:值 对
 $('#conRed').css({"background-color":"red","color":"#fff"});
 $('#remove').css('color','red');
 // 移除样式
 // $("#remove").removeClass("blue larger");
 </script>
</html>

3.操作元素的内容 

  • 对于元素还可以操作其中的内容，例如⽂本，值，甚⾄是html 
⽅法说明
html()获取元素的html内容
html("html, 内容")设定元素的html内容
text()获取元素的⽂本内容，不包含html
text("text 内容")设置元素的⽂本内容，不包含html
val()获取元素value值
val("值")设定元素的value值
  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>操作内容</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
 <body>
 <h3><span>html()和text()⽅法设置元素内容</span></h3>
 <div id="html"></div>
 <div id="text"></div>
 <input type="text" name="uname" value="oop" />
 </body>
 <script type="text/javascript">
 // 获取HTML内容，包括HTML标签
 console.log($('h3').html());
 // 获取⽂本内容，不包括HTML标签
 console.log($('h3').text());
 // 获取value值
 console.log($('[name=uname]').val());
 // 设置
 $('#html').html("<p>使⽤html设置,看不到标签</p>");
 $('#text').text("<p>使⽤text设置,能看到标签</p>");
 $('[name=uname]').val("哈哈哈");
 // console.info("abc");
 // console.log("abc");
 // console.warn("abc")
 // console.error("abc");
 </script>
</html>

4.创建元素 

  •  在jQuery中创建元素很简单，直接使⽤核⼼函数即可

$('元素内容'); 

$('<p>this is a paragraph!!!</p>');

5.添加元素 

⽅法说明
prepend(content)在被选元素内部的开头插⼊元素或内容，被追加的 content 参
数，可以是字符、HTML 元素标记。
$(content).prependTo(selector把 content 元素或内容加⼊ selector 元素开头
append(content)在被选元素内部的结尾插⼊元素或内容，被追加的 content 参
数，可以是字符、HTML 元素标记。
$(content).appendTo(selector把 content元素或内容插⼊selector 元素内，默认是在尾部
before()在元素前插⼊指定的元素或内容:$(selector).before(content)
after()在元素后插⼊指定的元素或内容:$(selector).after(content)
  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>追加</title>
 <script src="jquery-3.4.1.js" type="text/javascript" 
charset="utf-8"></script>
 <style type="text/css">
 div {
 margin: 10px 0px;
 }
 span{
 color: white;
 padding: 8px
 }
 .red{
 background-color: red;
 }
 .blue{
 background-color: blue;
 }
 .green{
 background-color: green;
 } </style>
 </head>
 <body>
 <h3>prepend()⽅法前追加内容</h3>
 <h3>prependTo()⽅法前追加内容</h3>
 <h3>append()⽅法后追加内容</h3>
 <h3>appendTo()⽅法后追加内容</h3>
 <span class="red">男神</span>
 <span class="blue">偶像</span>
 <div class="green">
 <span >⼩鲜⾁</span>
 </div>
 </body>
</html>

<script type="text/javascript">
 var str ="<span id='mydiv' style='padding: 8px;width: 180px;backgroundcolor:#ADFF2F;'>动态创建span</span>";
 // 1、使⽤prepend前加内容
 $("body").prepend(str);
 
 // 2、使⽤prependTo前加内容
 $("<b>开头</b>").prependTo('body');
 
 // 3、使⽤append后加内容
 $("body").append(str);
 // $("div").append($('.red')); // 当把已存在的元素添加到另⼀处的时候相当于移动
 
 // 4、使⽤appendTo后追加内容
 $(str).appendTo('body');
 // $('.blue').appendTo("div"); 
</script>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>插⼊元素</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
 <style type="text/css">
 span{
 color: white;
 padding: 8px
 }
 .red{
 background-color: red;
 }
 .blue{
 background-color: blue;
 }
 .green{
 background-color: green;
 }⽅法 说明
remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty() 清空所选元素的内容
4.6. 删除元素
 </style>
 </head>
 <body>
 <h3>before() 和 after()⽅法在元素之前后插⼊内容</h3>
 <span class="green">财⼤⽓粗</span>
 </body>
</html>
<script type="text/javascript">
 var str1 = "<span class='red'>⼟豪</span>";
 var str2 = "<span class='blue'>暴发户</span>";
 $(".green").before(str1); // 前置元素
 $(".green").after(str2); // 后存元素
</script>

6.删除元素 

⽅法说明
remove()删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty()清空所选元素的内容
  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>删除元素</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <style type="text/css">
 span{
 color: white;
 padding: 8px;
 margin: 5px;
 float: left;
 }
 .green{
 background-color: green;
 }
 .blue{
 background-color: blue;
 }
 </style>
 </head>
 <body>
 <h3>删除元素</h3>
 <span class="green">jquery<a>删除</a></span>
 <span class="blue">javase</span>
 <span class="green">http协议</span>
 <span class="blue">servlet</span>
 </body>
</html>
<script type="text/javascript">
 // 删除所选元素 或指定的⼦元素
 // $("span").remove();
 // 删除样式为blue的span
 // $("span.blue").remove();
 // 清空元素
 // $("span").empty();
 // $(".green").empty();
</script>

7.遍历元素 

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。 

  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>遍历元素</title>
 <style type="text/css">
 span{
 color: white;
 padding: 8px;
 margin: 5px;
 float: left;
 }
 .green{
 background-color: green;
 }
 .blue{
 background-color: blue;
 }
 </style>
 <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <h3>遍历元素 each()</h3>
 <span class="green">jquery</span>
 <span class="green">javase</span>
 <span class="green">http协议</span>
 <span class="green">servlet</span>
 </body>
 <script type="text/javascript">
 $('span').each(function (idx , e) {
 console.log(idx + " ---> " + $(e).text());
 })
 </script>
</html>

五、Jquery事件 

1. ready加载事件 

ready()类似于 onLoad()事件
ready()可以写多个，按顺序执⾏
$(document).ready(function(){})等价于$(function(){} 

  • 案例代码： 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>ready事件</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 // ⽂档载⼊完便触发ready⽅法
 $(document).ready(function(){
 $("div").html("ready go...");
 })
 // $(document).ready(function(){}) == $(function(){})
 $(function(){
 $("p").click( function () {
 $(this).hide();
 });
 });
 $(function(){
 $("#btntest").bind("click",function(){
 $("div").html("剁吧...");
 });
 });
 </script>
 </head>
 <body>
 <h3>⻚⾯载⼊时触发ready()事件</h3>
 <div></div>
 <input id="btntest" type="button" value="剁⼿" />
 <p>aaa</p>
 <p>bbbb</p>
 <p>ccc</p>
 <p>dddd</p>
 </body>
</html>

2. bind()绑定事件 

  • 为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。 

$(selector).bind( eventType [, eventData], handler(eventObject)); 

  • eventType ：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。 

[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执⾏的函数 

简单的bind()事件 

<script type="text/javascript">
 $(function(){
 /*$("#test").bind("click",function(){
 alert("世界会向那些有⽬标和远⻅的⼈让路！！");
 });*/
 /*
 * js的事件绑定
 ele.onclick=function(){};
 * */
 // 等同于上⾯的放⽅法
 $("#test").click(function(){
 alert("世界会向那些有⽬标和远⻅的⼈让路！！");
 });
 /*
 1.确定为哪些元素绑定事件
 获取元素
 2.绑定什么事件（事件类型）
 第⼀个参数：事件的类型
 3.相应事件触发的，执⾏的操作
 第⼆个参数：函数
 * */
 $("#btntest").bind('click',function(){
 // $(this).attr('disabled',true);
 $(this).prop("disabled",true);
 })
6. Jquery Ajax
 });
 </script>
<body>
 <h3>bind()⽅简单的绑定事件</h3>
 <div id="test" style="cursor:pointer">点击查看名⾔</div>
 <input id="btntest" type="button" value="点击就不可⽤了" />
</body>

绑定多个事件 

<script type="text/javascript">
 $(function(){
 // 绑定click 和 mouseout事件
 /*$("h3").bind('click mouseout',function(){
 console.log("绑多个事件");
 });*/
 // 链式编程
 $("h3").bind('click',function(){
 alert("链式编程1");
 }).bind('mouseout',function(){
 $("#slowDiv").show("slow");//让slowDiv显示
 });
 /*$("#test").click(function(){
 console.log("点击⿏标了....");
 }).mouseout(function () {
 console.log("移出⿏标了...");
 });*/
 $("#test").bind({
 click:function(){
 alert("链式编程1");
 },
 mouseout:function(){
 $("#slowDiv").show("slow");
 }
 });
 });
</script>
<body>
 <h3>bind()⽅法绑多个事件</h3>
 <div id="test" style="cursor:pointer">点击查看名⾔</div>
 <div id="slowDiv"style=" width:200px; height:200px; display:none; ">
 ⼈之所以能，是相信能
 </div>
</body>
别再心勭
关注
jQuery基础
01-01
以上介绍了jQuery基础的相关知识点，包括它作为一种JavaScript库的重要性，学习过程中需要关注的关键点，书籍的版权和使用规范，课程的设计理念，以及如何获取和使用示例代码。掌握这些知识，对于前端开发者来说是一...
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jquery中的$符号、#符号的详谈
m0_48930261的博客
08-23 2411
就这些么 $定义jQuery #表示标签的id jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作 基础语法是：$(selector).action() 美元符号 $ 定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class=“
$("#").html(ftl) js 动态引入宏定义,FTL惯用标签及语法
weixin_29435467的博客
06-21 1146
FTL常用标签及语法判断对象是否存在，若成立说明存在#if> #if>判断知否和某一个值相等(先判断是否存在，在判断相等，如果该指定的参数不存在还比较相等的话就回出错) #if>list循环(循环遍历list并给遍历的对象取别名attribute以方便后面对象调用)，if_exists在调用一个变量需要先判断是否为空不然为空时会出错,_index为取出行号索引从0开始,?...
shell中$(( )) 与 $( ) 还有${ }的区别
King's program process
08-03 2181
$( ) 与 ` ` (反引号) 在 bash shell 中，$( ) 与 ` ` (反引号) 都是用来做命令替换用(command substitution)的。 所谓的命令替换与我们第五章学过的变量替换差不多，都是用来重组命令行： * 完成引号里的命令行，然后将其结果替换出来，再重组命令行。 例如： [code]$ echo the last sunday is
关于$和#
fengjun_jlpsbc的专栏
01-29 272
问题问的应该都是jquery里的问题吧。$("#")是指选择器选择带有id的元素，例如&lt;input type="text" id="a"/&gt; 就可以用$("#id").val()来获取对应的数据值，而里面有加号的情况一般是有变量，在函数封装时常用，例如: 这里“＋”只是一个连接的作用，总得来说就是jquery的选择器，没有区别的说法 jQuery设计的宗旨是“write Les...
JQuery隐藏和显示div元素的三种方法
最新发布
许三金的博客
09-14 3842
toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。hide() 方法隐藏被选元素。show() 方法显示隐藏的被选元素。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种隐藏和显示状态切换的效果。;;
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
jQuery基础教程（第四版）中文pdf版+配套源码
05-15
《jQuery基础教程（第四版）中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源，旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历...
jquery video.js
weixin_43033775的博客
06-27 1976
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Video.js 7.4.1</title> <link rel="stylesheet" href="http://www.ecochina.net/static/v3/css/video-j...
jQuery html()方法显示不了内容的问题
tyt叮当tyt的专栏
08-05 4107
$("#content").html(data.content); $("#content")[0].innerHTML = data.content; 今天遇到jquery中的html方法
jQuery HTML操作学习笔记
W3Cschool官方博客
04-24 392
学习资料jQuery教程 获取1.获取、设置元素的内容1.1获取或设置目标元素的文本内容语法$(selector).text(); 获取元素文本内容 $(selector).text(content);设置元素的文本内容 $(selector).text(fnction(index,oldContent) {})参数说明index：当前选择器的索引位置 oldContent： 选择器的内容 text
jQuery框架的语法总结下来包括什么？
Ideality_hunter的专栏
03-01 772
jQuery的基本语法就一句：$(selector).action()，即选择器.操作。 1选择器 jQuery 参考手册 - 选择器 jQuery 参考手册 jQuery 事件 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id
jQuery 教程 jQuery入门学习教程
xiaoweids的博客
08-04 452
b) 页面$(":checkbox:checked")或$(":checked:checkbox")父加子: $("div").append("");$("table").find("tr") //找子孙都可以。$("table>tbody>tr").eq(0) 找第一行。$("table>tbody>tr") 找所有tr。
jquery基本语法
Super_Gods的博客
08-28 447
一.基本选择器 1 #id 选择器 2 element 选择器 3 .class 选择器 有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括 、、$(“*”）选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。 由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。
jQuery添加新元素/内容
PresByter的博客
10-25 2629
整理了一下jq添加元素/HTML的一些操作，效果图见下。 结构插入 内部插入 append() - 在被选元素的结尾插入内容 appendTo() -方法在被选元素的结尾（仍然在内部）插入指定内容。 prepend() - 在被选元素的开头插入内容 prependTo()- 方法在被选元素的开头（仍位于内部）插入指定内容。 外部插入 after() -
jquery写简单的div切换
u012138854的博客
12-06 134
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #odiv div{width: 200px; height: 200px; bo...
append追加html参数,jquery append()方法与html()方法的区别及使用介绍
weixin_36254537的博客
06-02 773
append(content)：方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多，其它从英文意义上append是在原有基础上增加，而html中是替换当前所有内容。定义和用法append() 方法在被选元素的结尾(仍然在内部)插入指定内容。$(selector).append(content)使用函数来附加内容使用函数在指定元素的结尾插入内容。语法$(sel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值