jQuery简单入门

zoukankan html css js c++ java

jQuery简单入门
一、jQuery介绍

1.什么是jQuery？

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScirpt开发的js类库

2.jQuery的核心思想

它的核心思想就是write less, do more（写得更少，做得更多），所以它实现了很多浏览器的兼容问题。

3.jQuery的好处

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

4.jQuery使用示例
```

<script src="../jQuery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function() { //表示页面加载完成之后，相当于window.onload=function(){}
            var $btn = $("#btnid"); //按id查询标签对象
            $btn.click(function() { //绑定单击事件
                alert("jQuery单击事件");
            });


        });
</script>
<button id="btnid">say hello</button>
```
使用说明：
1. 一定要先引入jQuery库
2. $是一个函数
3. 绑定事件（例如给按钮添加点击响应）
  
  使用jQuery查询到标签对象
  
  使用标签对象.click(function(){})
二、jQuery核心函数

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

1、当传入参数为[函数]时

表示页面加载完成之后。相当于window.onload=function(){}
```
<script type="text/javascript">
    //表示页面加载完成之后，相当于window.onload=function(){}    
    $(function() {});
</script>
```
2、当传入参数为[HTML字符串]时

根据这个字符串创建元素节点对象
```
<script type="text/javascript">
    $(function() {
        $("<div>" +
          "<span>div-span1</span>" +
          "<span>div-span2</span>" +
          "</div>").appendTo("body");
		//在body标签内添加字符串的内容
    });
</script>
```
3、当传入参数为[选择器字符串]时

根据这个字符串查找元素节点对象
```
$("#id属性值"); //根据id值查询
$("标签名"); //根据标签名查询
$(".class属性值"); //根据类属性值查询
```
4、当传入参数为[DOM对象]时

将DOM对象包装为jQuery对象返回
```
var btnObj = document.getElementById("btn");
alert(btnObj);//[object HTMLButtonElement]
alert($(btnObj));//[object Object]
```
三、jQuery对象和dom对象区分

1、哪些是jQuery对象，哪些是dom对象

Dom对象
1. 通过document查询出来的对象是Dom对象
2. 通过document创建出来的对象是Dom对象
JQuery对象
1. 通过jQuery提供的API创建的对象是jQuery对象
2. 通过jQuery包装的Dom对象，是jQuery对象
3. 通过jQuery提供的API查询到的对象，是jQuery对象
2、jQuery对象的本质

jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。

3、jQuery对象和Dom对象使用区别
- jQuery对象不能使用DOM对象的属性和方法
- DOM对象也不能使用jQuery对象的属性和方法
4、Dom对象和jQuery对象互转

1）、Dom对象转为jQuery对象
1. 先有dom对象
2. $(Dom对象)就可以转为jQuery对象
2）、jQuery对象转为dom对象
1. 先有jQuery对象
2. 我们知道jQuery对象是dom对象的数组，故使用jQuery对象[下标]就能取出相应的dom对象
四、jQuery选择器

1、基本选择器
```
$("选择器");
```
- #id：根据id查找标签对象
- .class：根据class查找标签对象
- element：根据标签名查找标签对象
- *:表示任意的元素
- select1, select2 ：合并选择器1，选择器2的结果并返回
- p.className:取p和.className结果的交集并返回
查询结果的顺序是与页面中的标签的先后顺序一致的，不是与选择器的先后顺序一致的

2、层级选择器

1）、ancestor descendant

在给定的组员元素下匹配所有的后代元素

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" />, <input name="newsletter" /> ]
```
2）、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" /> ]
```
3）、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" /> ]
```
4）、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" /> ]
```
3、其他选择器

jQuery的过滤器与css基本上一致的，只是jQuery有jQuery的写法，这里就不加赘述了。

五、jQuery的文档操作

1、属性操作
- html() :可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。
```
//返回p元素的内容。
$('p').html();

//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
```
- text():可以设置和获取起始标签和结束标签中的文本。跟dom属性的innerText一样
```
//返回p元素的文本内容。
$('p').text();

//设置所有 p 元素的文本内容
$("p").text("Hello world!");
```
- val()：可以设置和获取表单项的value属性值。跟dom的value一样
```
//获取文本框中的值
$("input").val();

//设定文本框的值
$("input").val("hello world!");
```
- attr():设置或返回被选元素的属性值。
不推荐操作checked、readOnly、selected、disabled等

attr还可以设置自定义属性
```
//返回文档中所有图像的src属性值。
$("img").attr("src");

//为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });

//为所有图像设置src属性。
$("img").attr("src","test.jpg");
```
- prop():设置或返回被选元素的属性值。
prop和attr的作用相同，不同的是prop有返回值，attr没有返回值。

只推荐操作checked、readOnly、selected、disabled等。
```
//选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");

//禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
  disabled: true
});

//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
```
- offset()：返回或设置第一个匹配元素相对于文档的位置
返回标签前距离左上角的距离

2、dom的增删改操作

1）、内部插入
- appendTo()
a.appendTo(b) :把a插入到b子元素的末尾，成为b的最后一个子元素

HTML代码
```
<p>I would like to say: </p>
```
jQuery代码
```
$("p").append("<b>Hello</b>");
```
结果
```
[ <p>I would like to say: <b>Hello</b></p> ]
```
- prependTo()
a.prependTo(b):把a插入到b子元素的前面，成为b的第一个子元素

HTML代码
```
<p>I would like to say: </p>
<div id="foo"></div>
```
jQuery代码
```
$("p").prependTo("#foo");
```
结果
```
<div id="foo">
    <p>I would like to say: </p>
</div>
```
2）、外部插入
- insertAfter()
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。兄弟标签

HTML代码
```
<p>I would like to say: </p>
<div id="foo">Hello</div>
```
jQuery代码
```
$("p").insertAfter("#foo");
```
结果
```
<div id="foo">Hello</div>
<p>I would like to say: </p>
```
- insertBefore()
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

HTML代码
```
<div id="foo">Hello</div>
<p>I would like to say: </p>
```
jQuery代码
```
$("p").insertBefore("#foo");
```
结果
```
<p>I would like to say: </p>
<div id="foo">Hello</div>
```
3）、替换
- replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素。

a.replaceWith(b):用b替换a

HTML代码
```
<p>Hello</p>
<p>cruel</p>
<p>World</p>
```
jQuery代码
```
$("p").replaceWith("<b>Paragraph. </b>");
```
结果
```
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
```
- replaceAll()
a.replaceAll(b):用a替换掉所有的b

HTML代码
```
<p>Hello</p>
<p>cruel</p>
<p>World</p>
```
jQuery代码
```
$("<b>Paragraph. </b>").replaceAll("p");
```
结果
```
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
```
4）、删除
- remove()
删除标签

HTML代码
```
<p>Hello</p>
how are 
<p>you?</p>
```
jQuery代码
```
$("p").remove();
```
结果
```
how are
```
- empty()
清空标签里的内容

HTML代码
```
<p>
    Hello, 
    <span>Person</span>
    <a href="#">and person</a>
</p>
```
jQuery代码
```
$("p").empty();
```
结果
```
<p></p>
```
3、css样式操作
- addClass() ：添加样式
HTML代码
```
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
```
jQuery代码
```
$('ul li').addClass(function() {
  return 'item-' + $(this).index();
});
```
结果
```
<ul>
   <li class="item-0">Hello</li>
	<li class="item-1">Hello</li>
	<li class="item-2">Hello</li> 
</ul>
```
- removeClass() ：删除样式
HTML代码
```
<ul>
   <li class="item-0">Hello</li>
	<li class="item-1">Hello</li>
	<li class="item-2">Hello</li> 
</ul>
```
jQuery代码
```
$('ul li').removeClass("item-0");
```
结果
```
<ul>
   <li class="">Hello</li>
	<li class="item-1">Hello</li>
	<li class="item-2">Hello</li> 
</ul>
```
- toggleClass()：有就删除，没有就添加样式
HTML代码
```
<ul>
   <li class="">Hello</li>
	<li class="item-1">Hello</li>
	<li class="item-2">Hello</li> 
</ul>
```
jQuery代码
```
$('ul li').toggleClass("item-1");
```
结果
```
<ul>
    <li class="item-1">Hello</li>
    <li class="">Hello</li>
    <li class="item-2 item-1">Hello</li>
</ul>
```
4、动画操作

1）、基本动画
- show() ：将隐藏的元素显示
HTML代码：
```
<p style="display: none">Hello</p>
```
jQuery代码：
```
$("p").show()
```
结果：
```
<p style="">Hello</p>
```
- hide()：将可见的元素隐藏
HTML代码：
```
<p >Hello</p>
```
jQuery代码：
```
$("p").hide();
```
结果：
```
<p style="display: none;">Hello</p>
```
- toggle()：可见就隐藏，不可见就显示
动画都可以添加参数：
1. 第一个参数是动画的时长，以毫秒为单位
2. 第二个参数是动画的回调函数（动画完成后自动调用的函数）
2）、淡入淡出动画
- fadeIn()：淡入（慢慢可见）
- fadeOut()：淡出（慢慢消失）
- fadeTo()：在指定时长内慢慢将透明度修改到指定的值。0透明，1完全可见
- fadeToggle()：淡入淡出切换
5、事件操作

1）、原生js页面和jQuery页面加载完成之后的区别

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

触发的顺序
1. jQuery页面加载完成之后先执行
2. 原生js页面加载完成之后后执行
触发的时间
1. jQuery的页面加载完成是在浏览器的内核解析完页面的标签，创建好Dom之后就会马上执行。
2. 原生js的页面加载完成，除了要等浏览器内核解析完标签，创建好Dom，还要的等标签显示时需要的内容加载完成
执行的次数
1. 原生js页面加载完成之后，只会执行一次window.onload=function(){}操作，就算有多个操作，前面的函数也会被后面的覆盖
2. jQuery的页面加载完成之后，会顺序执行全部的$(function(){})，
2）、常用事件处理方法
- click()：绑定及触发单击事件
- mouseover()：鼠标移入事件
- mouseout()：鼠标移出事件
- on()：可以给元素一次性绑定一个或多个事件
- one():也是绑定事件。绑定的事件只能响应一次
- off()：解除事件的绑定
3）、事件的冒泡

什么是事件冒泡？

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

比如：父子元素都绑定了点击事件，我们点击触发子元素的事件，子元素事件触发完成后，父元素的点击事件也会触发。

如何阻止事件冒泡？

在子元素的函数体内，return false就可以阻止事件的冒泡传递。

4）、事件对象

什么是事件对象？

是封装有触发的事件信息的一个javascript对象。

如何获取事件对象？

在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，我们习惯命名为event，这个event就是javascript事件对象。

我们可以从事件对象从获取到触发事件的详细信息
查看全文

相关阅读:
YTU 1002: Home Work
C++拷贝构造函数(深拷贝，浅拷贝)
深入探讨this指针
 C++中关于strtok()函数的用法
 STL笔记之【map之移除元素】
进程结束后，进程的所有内存都将被释放，包括堆上的内存泄露的内存。
数组指针和指针数组的区别
 sizeof()用法汇总
 文件描述符和文件指针的区别
 字符集、字符编码、XML中的中文编码

原文地址：https://www.cnblogs.com/ylcc-zyq/p/12554071.html

jQuery简单入门

一、jQuery介绍

二、jQuery核心函数

1、当传入参数为[函数]时

2、当传入参数为[HTML字符串]时

3、当传入参数为[选择器字符串]时

4、当传入参数为[DOM对象]时

三、jQuery对象和dom对象区分

1、哪些是jQuery对象，哪些是dom对象

2、jQuery对象的本质

3、jQuery对象和Dom对象使用区别

4、Dom对象和jQuery对象互转

1）、Dom对象转为jQuery对象

2）、jQuery对象转为dom对象

四、jQuery选择器

1、基本选择器

2、层级选择器

1）、ancestor descendant

2）、parent > child

3）、prev + next

4）、prev ~ siblings

3、其他选择器

五、jQuery的文档操作

1、属性操作

2、dom的增删改操作

1）、内部插入

2）、外部插入

3）、替换

4）、删除

3、css样式操作

4、动画操作

1）、基本动画

2）、淡入淡出动画

5、事件操作

1）、原生js页面和jQuery页面加载完成之后的区别

2）、常用事件处理方法

3）、事件的冒泡

4）、事件对象