jQuery 基础

jQuery 库中的 $() 是什么
(1) $() 函数是 jQuery() 函数的别称。
(2) $() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的
多个不同方法。
(3) 你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组
jQuery 对象
 jQuery 入口函数与 JavaScript 入口函数的区别：
  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery与js区别:

      jquery有一层功能皮肤，其内核还是js

js与jQuery之间的转换:

（1）js对象转成jQuery对象：$(js对象)

        js=> jQuery
        jQuery=$(js/dom);
        jQuery=$(div);
        jQuery=$("<li>列表</li>");

（2）jquery对象转换成js对象：jquery对象[索引值]  或 jquery对象.get(索引值)   

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

jQuery 选择器: 元素选择器 #id选择器  .class选择器等

   jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

jQuery过滤选择器：

$("*")：选取所有元素

$(this)：选取当前 HTML 元素

$("p.intro")：选取 class 为 intro 的 <p> 元素

$("p:first")：选取第一个 <p> 元素

$("p:last")：选择所有p元素的最后一个

$("ul li:first")：选取每个 <ul> 元素的第一个 <li> 元素

$(":button")：选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")：选取偶数位置的 <tr> 元素，选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd")：选取奇数位置的 <tr> 元素

$("td:empty") ：选择所有的为空（也不包括文本节点）的td元素的数组

 

  • $("A B")：查找A元素下面的所有子节点，包括非直接子节点
  • $("A>B") ：查找A元素下面的直接子节点
  • $("A+B") ：查找A元素后面的兄弟节点，包括非直接子节点
  • $("A~B") ：查找A元素后面的兄弟节点，不包括非直接子节点

jquery可见性过滤选择器：

$("div:hidden")：选择所有的被hidden的div元素
$("div:visible")：选择所有的可视化的div元素

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>


 










            

            
posted @ 
2021-11-08 14:51 
京京吖！ 
阅读(80) 
评论(0) 
编辑 
收藏 
举报