jQuery 基础

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>