微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

jQuery 基础

分类：jQuery作者：编程之家原文地址AI导航网
jQuery 库中的 $() 是什么 (1) $() 函数是 jQuery() 函数的别称。 (2) $() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的 多个不同方法。 (3) 你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组 jQuery 对象  

jQuery 选择器

#id:用于搜索的，通过元素的 id 属性中给定的值

 例子：

HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:[ <div id="myDiv">id="myDiv"</div> ]

.class 选择器:一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

例子：

HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

元素选择器:一个用于搜索的元素。指向 DOM 节点的标签名。

例子：

HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:[ <div>DIV1</div>, <div>DIV2</div> ]

*:匹配所有元素,多用于结合上下文来搜索。

例子：

HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
 

parent > child:在给定的父元素下匹配所有的子元素

例子：

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


jQuery 代码:


$("form > input")


结果:[ <input name="name" /> ]




prev + next：匹配所有紧接在 prev 元素后的 next 元素


例子：


HTML 代码:


<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


jQuery 代码:


$("label + input")


结果:[ <input name="name" />, <input name="newsletter" /> ]


prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素


例子：


HTML 代码:


<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


jQuery 代码:


$("form ~ input")


结果:


[ <input name="none" /> ]


基本筛选器

:first：获取第一个元素


例子：



 $("li:first")



HTML 代码:




<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>




jQuery 代码:




$('li:first');




结果:[ <li>list item 1</li> ]


:not(selector):去除所有与给定选择器匹配的元素,在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）


例子：


HTML 代码:


<input name="apple" />
<input name="flower" checked="checked" />




jQuery 代码:




$("input:not(:checked)")




结果:[ <input name="apple" /> ]


:even:匹配所有索引值为偶数的元素，从 0 开始计数   查找表格的1、3、5...行（即索引值0、2、4...）


例子：


HTML 代码:




<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>




jQuery 代码:




$("tr:even")




结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]


:odd:匹配所有索引值为奇数的元素，从 0 开始计数  查找表格的2、4、6行（即索引值1、3、5...）


例子：




HTML 代码:




<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>


jQuery 代码:




$("tr:odd")




结果:[ <tr><td>Value 1</td></tr> ]


:eq(index):匹配一个给定索引值的元素 从 0 开始计数 


例子：


HTML 代码:




<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>




jQuery 代码:




$("tr:eq(1)")




结果:[ <tr><td>Value 1</td></tr> ]


:gt(index):匹配所有大于给定索引值的元index从 0 开始计数   


例子：



HTML 代码:


<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>


jQuery 代码:


$("tr:gt(0)")


结果:


[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]



:lt(index):匹配所有小于给定索引值的元素,从 0 开始计数


例子：



HTML 代码:


<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>


jQuery 代码:


$("tr:lt(2)")


结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]



:contains(text):匹配包含给定文本的元素 一个用以查找的字符串


例子：



HTML 代码:


<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn


jQuery 代码:


$("div:contains('John')")


结果:[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]



:empty:匹配所有不包含子元素或者文本的空元素 


例子：



HTML 代码:


<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>


jQuery 代码:


$("td:empty")


结果:[ <td></td>, <td></td> ]



:has(selector):匹配含有选择器所匹配的元素的元素  一个用于筛选的选择器


例子：



HTML 代码:


<div><p>Hello</p></div>
<div>Hello again!</div>


jQuery 代码:


$("div:has(p)").addClass("test");


结果:[ <div class="test"><p>Hello</p></div> ]



:parent:匹配含有子元素或者文本的元素


例子： 



HTML 代码:


<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>


jQuery 代码:


$("td:parent")


结果:[ <td>Value 1</td>, <td>Value 2</td> ]



:hidden:匹配所有不可见元素，或者type为hidden的元素


例子： 



查找隐藏的 tr


HTML 代码:


<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>


jQuery 代码:


$("tr:hidden")


结果:[ <tr style="display:none"><td>Value 1</td></tr> ] 


匹配type为hidden的元素


HTML 代码:


<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>


jQuery 代码:


$("input:hidden")


结果:[ <input type="hidden" name="id" /> ]



:visible:匹配所有的可见元素


例子：



HTML 代码:


<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>


jQuery 代码:


$("tr:visible")


结果:


[ <tr><td>Value 2</td></tr> ]




display:none 与 visibility:hidden 的区别是什么？


(1) display : 隐藏对应的元素但不挤占该元素原来的空间。即是，使用 CSS display:none 属性


后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;


(2) visibility: 隐藏对应的元素并且挤占该元素原来的空间。 而使用 visibility:hidden 属性后，


HTML 元素（对象）仅仅是在视觉上看不见（完 全透明），而它所占据的空间位置仍然存在。
 



<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        // window.onload=function(){
        //     console.log(0);
        // }
            // //  三中简写
            // //one
            //     $(document).ready(function(){
            //     })
            // //two
            //     $().ready(function(){

            //     })
            // //there
            //     $(function(){

            //     })

        //alert();
        //window.alert();

        // function a(){

        // }

        // console.log(window);

        // js=>jq
        // jq(对象)=$(js对象/dom)
        // jq=$(div)
        // jq=$("<li>列表</li>")

        // jq=>js
        // [0]
        // js=jq[0]
        // js=$div[0]

         $(function(){
            // var div=document.querySelector(".div");
            // var $div=$(div);
            // var $div= $(".div");
            // var $div=$(":first");
            // $div.click(function(){

            // }) 
            
        // $("li:first")
        // $("li:eq(0)").css("color","red");
        // $("li:gt(2)").css("color","green");
        // $("li:lt(2)").css("color","yellow");

        //  $("li:empty").css("color","red"); //不显示
        // $("li:parent").css("color","red");//显示红
        // $("li:has(.span)").css("color","red");//显示红 检查选择器
        // $("li:countains(999)").css("color","red");//文本


        })
    </script>
</head>
<body>
    <!-- <div class="div">
    </div> -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span class="span">999</span></li>
        <li>列表5</li>
        <li></li>
    </ul>
</body>
</html>



 


面试题：

51. 函数节流是什么
(1) 函数节流就是让一个函数无法在很短的时间间隔内连续调用，而是间隔一段时间执行，
(2) 这在我们为元素绑定一些事件的时候经常会用到，比如我们 为 window 绑定了一个 resize 事
件，如果用户一直改变窗口大小，就会一直触发这个事件处理函数，这对性能有很大影响。
52. 请用代码写出(今天是星期 x)其中 x 表示当天是星期几,如果当天是星期一,
输出应该是"今天是星期一"
var days = ['日','一','二','三','四','五','六'];
var date = new Date();
console.log('今天是星期' + days[date.getDay()]);
53. 下面这段代码想要循环延时输出结果 0 1 2 3 4,请问输出结果是否正确,如
果不正确,请说明为什么,并修改循环内的代码使其输出正确结果
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}
不能输出正确结果，因为循环中 setTimeout 接受的参数函数通过闭包访问变量 i。javascript 运
行环境为单线程，setTimeout 注册的函数需要等待线程空闲才能执行，此时 for 循环已经结束，i
值为 5.五个定时输出都是 5 修改方法：将 setTimeout 放在函数立即调用表达式中，将 i 值作为
参数传递给包裹函数，创建新闭包
for (var i = 0; i < 5; ++i) {
闭包：
(function (i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}(i));
}
54. 编写 javascript 深度克隆函数 deepClone
function deepClone(obj) {
var _toString = Object.prototype.toString;
// null, undefined, non-object, function
if (!obj || typeof obj !== 'object') {
return obj;
}
// DOM Node
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true);
}
// Date
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime());
} // RegExp
if (_toString.call(obj) === '[object RegExp]') {
var flags = [];
if (obj.global) { flags.push('g'); }
if (obj.multiline) { flags.push('m'); }
if (obj.ignoreCase) { flags.push('i'); }
return new RegExp(obj.source, flags.join(''));
}
var result = Array.isArray(obj) ? [] :
obj.constructor ? new obj.constructor() : {};
for (var key in obj ) {
result[key] = deepClone(obj[key]);
}
return result;
}
function A() {
this.a = a;
}
var a = {
name: 'qiu',
birth: new Date(),
pattern: /qiu/gim,
container: document.body,
hobbys: ['book', new Date(), /aaa/gim, 111]
};
var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);
55. 补充代码,鼠标单击 Button1 后将 Button1 移动到 Button2 的后面
<!doctype html>
<html><head>
<Meta charset="utf-8">
<title>TEst</title>
</head>
<body>
<div>
<input type="button" id ="button1" value="1" />
<input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
var btn1 = document.getElementById('button1');
var btn2 = document.getElementById('button2');
addListener(btn1, 'click', function (event) {
btn1.parentNode.insertBefore(btn2, btn1);
});
function addListener(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
return handler;
} else if (elem.attachEvent) {
function wrapper() {
var event = window.event;
event.target = event.srcElement;
handler.call(elem, event);
}
elem.attachEvent('on' + type, wrapper);
return wrapper;
}
}
</script>
</body>
</html>
 
                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

                            

                        

                    

                

                

                    

                        

                            
相关推荐

                            

                                 
jquery页面搜索关键词突出显示

                                
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;

                  
                                
                            

                                 
jQuery实时显示日期、时间

                                
jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery

                  
                                
                            

                                 
jQuery 添加水印

                                
jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re

                  
                                
                            

                                 
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

                                
中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

                  
                                
                            

                                 
Asp.net 后台调用js方法

                                
1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数

                  
                                
                            

                                 
Jquery实现按钮点击遮罩加载，处理完后恢复

                                
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto

                  
                                
                            

                                 
.Net后台调用js，提示、打开新窗体、关闭当前窗体

                                
.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&

                  
                                
                            

                                 
.net 搜索联想词

                                
思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&

                  
                                
                            

                                 
JS点击子元素不触发父元素点击事件(js阻止冒泡)

                                
&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100

                  
                                
                            

                                 
jQuery表单验证提交：前台验证一

                                
jQuery表单验证提交：前台验证一（图文+视频）

                  
                                
                            

                    



            

            

              
          

            

              




              

            

          

          
           
          

            

              

                
苹果市值2025年有望达4万亿美元 

              

            

          

          
          
          

            

              

                
                
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native