jQuery

最新推荐文章于 2024-06-15 20:48:16 发布

The Straight

最新推荐文章于 2024-06-15 20:48:16 发布

阅读量106

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_35917517/article/details/118888610

版权

引入

什么是jQuery ?
jQuery，顾名思义，也就是JavaScript和查询（Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想!!!
它的核心思想是write less, do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处!! !
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素制作动画效果、事件处理、使用Ajax以及其他功能

简单实用

导入问题

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>

直接下载.js文件不好搞，就用了CDN分发。ps：由于用的是google的，还得开梯子才发现可以用
也可以选择使用min文件

min.js就小一些、效率高。部署到网站上的时候，用min.js

<script type="text/javascript">
     $(function (){//相当于 window.onload = function(),表示页面加载完成之后
       var $btnObj = $("#btnId");//表示按照id查询对象  ，带上$ 就代表是一个jQuery对象
       $btnObj.click(function (){//以此类推
         alert("jQuer单击！");
       });
     });
   </script>

带上$ 就代表是一个jQuery对象

$ 的核心函数

$ 本身是一个函数，后面跟不同的东西也有不同的作用
不同参数，不同意思
$( 函数)：在文档加载完成之后，执行这个函数
$(HTML字符串)：根据这个字符串，创建元素节点对象
$(选择器字符串)：根据字符串，查找元素节点对象—又可以细分

$("#id 属性值") ： id选择器，根据id查询标签对象
$(“标签名”)：标签名选择器，根据指定的标签名查询标签对象
$(".class属性值") 类型选择器，可以根据class属性查询标签对象

$(DOM对象)~~其实就是之前的普通对象~~：包装成jQuery对象返回

$(
  function (){
        var btnObj = document.getElementById("btn01");
        alert(btnObj);
    });

这个是转换为$对象

$(function (){
      alert($("button").length);//查 button 标签有几个
    })

这个是查TagName

jQuery提供的遍历

$object.each(function(){
this
});

在each的遍历方法中，this表示当前遍历到的那个对象。

区分DOM和$对象

Dom对象

1.通过getElementByld(查询出来的标签对象是Dom对象
2通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象，是Dom对象

DOM对象Alert出来的效果是:[object HTML标签 ELement]

jQuery对象

5.通过JQuery提供的API创建的对象，是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象

jQuery altert出来效果是 [ object Object]

jQuery对象的本质

页面里面有四个 button，然后用 **$**包装起来。
就形成了一个 数组，元素可以是DOM对象。

本质：
DOM对象数组 + jQuery提供的一系列功能函数。

$(
   function (){
      var $btns = $("button");
      for(var i=0;i<$btns.length;i++){
         alert(i);
      }
   }
 )

这里就是循环遍历出$btns所根据buttons标签、过滤出来的jQuery对象

两种对象的使用区别

jQuery 对象和DOM的方法不可以互相用

在这里插入图片描述

jQuery选择器（重点）

基本选择器

function (){//加载完成之后
          $("#ID").click(function (){//给按钮绑定事件
            alert($(".1").length);
          });
        }/**
         *  .class 选择器
         */

点击一个id为ID的按钮，就显示button的jQuery数组长度。
这里知识点：
1、整个function,包裹起来就是为了整个页面加载之后再启用
2、$("#ID")整体就是ID按钮，可以后面接上自己的方法

在这里插入图片描述

层级选择器

 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

ps：子元素就是必须是子元素，孙元素不可以。

<form>
  <label>Name :</label>
  <input name="name" class="son">
  <fieldset>
     <label class="son">Hewsletter : <label>
     <input name="newsletter" class="son">
  <fieldset>
<form>
<input name="none" />

这里面form 和name=none一个级别
form儿子是input name、fieldset、label
field自己也有俩儿子

$("#label ~ .son ")    //紧邻下一个元素选择器

那就有两个 label后接着的class = son

过滤选择器

基本内容过滤器

$(function (){
         alert($("button:first").length);
       });

button的jQuery数组第一个

基本
:first
:last

:not(selector) 去除掉不要的

//HTML代码:
<input name=" apple" />
<input name=“flower" checked="checked" />
//jQuery 代码:
$ ("input : not (: checked)")

结果就是选出了apple

:even
:odd
选出奇偶项

alert($("tr:odd").length);

:eq(index) 列表中的第四个元素（index 值从 0 开始）

$("ul li:eq(3)")

:gt(index) 列举 index 大于 3 的元素

$("ul li:gt(3)")

:lt(index) 列举 index 小于 3 的元素

$("ul li:lt(3)")

:header 所有标题元素《h1>, <h2》 …

$(":header")

:animated 所有动画元素

 	$(":animated")

:focus 1.6+ 当前具有焦点的元素

 	$(":focus")

内容过滤器

主要是针对text的文本内容

:contains(’ ')

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

JS内容

$(function (){
      alert($("div:contains('Martin')").length);
});

就查找只有John的文本

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

:parent 查找所有含有子元素、文本的元素

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

alert($("td:parent").length);

筛选出来有两个value1 和 value2。

属性过滤器

对于标签的属性过滤

[attribute]
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute !=value] 和上面的正好反过来
[attribute^=value] 以xxx开头的
[attribute$=value] 以xxx
[attribute*=value] 包含了就行
[attrsel1] [attrsel2] [attrselN] 同时满足

表单过滤器

:input 带了input的< input >都会算进去
:text 匹配单行的文本框 <input type = "text">就算这种
:password <input type = "password">就算这种
:radio <input type = "radio">就算这种
:checkbox <input type = "checkbox">就算这种
:submit <input type = "submit">就算这种
:image <input type = "image">就算这种
:reset <input type = "reset">就算这种
:button <input type = "button">就算这种
:file <input type = "file">就算这种
:hidden <input type = "checkbox">就算这种

表单对象属性

:disabled <input type="button" disabled="disabled ">这个按钮就不可以动了
:enabled 就可以动；额
:checked 默认选上
:selected 默认勾住

对于jQuery的输入框，获取内容是.val(默认内容)

jQuery元素的筛选

过滤

eq(index/-index)
first()
last()
hasclass(class)
filter(exprlobjlelelfn) 过滤，留下所需要的元素
is(）判断是否匹配给定的选择器，只要有一个匹配就返回 true
map(callback)
has(expr|ele) 保留具有指定后代的元素
not(expr|elelfn) 删除匹配选择器的元素，带了xxx的就不要
slice(start,[endj

查找

children([expr])：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

closest(expr,[con]lobilele)1.6*find(exprlobj]ele)

next([expr]) ：返回当前元素的下一个兄弟元素

nextall() ：返回当前元素后面所有的兄弟元素

nextUntil() ：返回当前元素到指定匹配的元素为止的后面元素

ffsetParent
parent([expr])
parentsUntil([explele]L.fil1j1.6*
prev([expr])
prevAll([expr]) 返回当前元素前面所有的兄弟元素
prevUntil([explele][ ,fil]) 1.6+
siblings([expr])

串联

…

官方文档

记录没意义，有需要用的时候，去看官方文档就好了。
jQuery官方文档

HTML属性操作

html()
它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。
text()
它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText一样。
val()
它可以设置和获取表单项的 value 属性值。跟dom属性value一样

html（）

传参的话，就类似于完全重置了

<script type="text/javascript">
    $(function (){
      //不传参数，是获取已有内容，传递参数是设置新内容
      //alert( $("div").html());//获取
      $("div").html("<h1>我是div中的标题1</h1>");//设置
    });
  </script>

<div>我是div <span>我是div内部的span</span></div>

text（）

<script type="text/javascript">
    $(function (){
      //不传参数，是获取已有内容，传递参数是设置新内容
      //alert( $("div").html());//获取
     // $("div").html("<h1>我是div中的标题1</h1>");//设置
       $("div").text("新内容");//有无参数的区别 和上面一样
    });
  </script>

val（）

$("input").val("默认内容");

<input type="text" name="username" id="username"/>

当然，如果要设置单选项的默认设置，就要**[ ]**搭配
如

$(function(){
    $("radio").val(["radio2"]);
})

<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio1" />radio2

如此一来，就会默认先选第二个

<script type="text/javascript">
    $(function (){
      //各自单选
      /*$(":radio").val(["radio2"]);
      $(":checkbox").val(["checkbox1"]);
      $("#mutiple").val(["mul2"]);*/

      //一起
      $(":radio,#mutiple").val(["radio2","mul2","mul3"]);
    });
  </script>
</head>
<body>
单选：
<input name="Radio" type="radio" value="radio1" />radio1
<input name="Radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉单选：
<select id="mutiple" multiple="multiple" size="5">
  <option value="mul1">mul1</option>
  <option value="mul2">mul2</option>
  <option value="mul3">mul3</option>
  <option value="mul4">mul4</option>
  <option value="mul5">mul5</option>
</select>
</body>

attr（） prop（）

都可以设置、获取属性值

一个参数值的时候，就是单纯的获取
alert( $(": checkbox:first" ).attr( "name") ); //获取
第二个参数值，就是要修改的
$(" : checkbox:first" ).attr( "name" , "abc") ; //设置

系统认为 undefined 是一个错误
prop可以完全替换，而且对于attr，后者prop对于不确定的boolean值会更加直观，不至于返回undefined，而是处理成false

attr : 不推荐操作以下属性 checked、readonly、selected、disabled,且可以操作自定义属性
例如：$(":checked：first").attr("age","35");,在这里，直接自定义了一个age属性，然后还设置为了36岁
prop : 推荐操作attr不善于操作的以上的

应用：对于想要初始化 checked 都为不选，就可以用prop的 false。毕竟不可能用attr的undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" ></script>
  <script type="text/javascript">
    $(function (){
      $("#checkedAllBtn").click(function (){//全选
       $(":checkbox").prop("checked",true);
      });

      $("#checkedRevBtn").click(function (){//反选
        $(":checkbox[name = 'items']").each(function () {
             this.checked =!this.checked;
        });
      });

      $("#SendBtn").click(function (){//提交
        $(":checkbox[name='items']:checked").each(function (){
          alert(this.value);
        });
      });

    });

  </script>
</head>
<body>
<form method="post" action="">
  爱好：<input type="checkbox" id="checkedAllBox" />全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="篮球" />篮球
  <input type="checkbox" name="items" value="乒乓球" />乒乓球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球
  <br/>
  <input type="button" id="checkedAllBtn" value="全  选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反选"/>
  <input type="button" id="SendBtn" value="提交"/>

</form>
</body>
</html>

练习demo

DOM对象的增删改查

增加：
a.appendTo(b) a放在b最后一个追加
a.prependTo(b) a成为b的第一个
ps:( ) 内部可以进行筛选过滤
insertAfter("div")在每个div后面都来一个
insertBefore("div")

替换:
replaceWith() 只替代一个
replaceAll(b)所有的b都没了

删除：
remove 整个标签都没了
empty 标签内容没了

补充

confirm:在弹出提示框中，让人确定一次。返回值是boolean类型

jQuery 事件操作

他们分别是在什么时候触发?
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生 js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
他们触发的顺序?
jQuery页面加载完成之后先执行
原生js的页面加戟完成之后

jQuery其他事件处理方法

类似于java swing里面的鼠标单击

比如click：单击效果

$("button").click(function(){
  alter("按钮被单击");
});

bind：绑定多个事件

$("button").bind("click mouseover mouseout",function){
}

unbind：解绑
mouseover：鼠标在上面
mouseout：鼠标挪出去
live:也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

事件的冒泡

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

就是点 子元素 就相当于点了 父元素

如何解绑？
只需要return false

$("span").click(function (){
        alert('我是son元素');
        return false;
      })

javaScript事件对象

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

我们重点关心的是怎么毫到这个 javascript的事件对象。以及使用。

如何获取呢javascript事件对象呢?

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

比如event可以是鼠标点击事件：

window.onload = function (){//js版本
      document.getElementById("content").onclick=function (event){
        console.log(event);
      }

$(function () {//jQuery版本
        $("#content").click(function (event) {
          consoLe.log(event);
        });
      });
$("#content").bind( "mouseover mouseout",function (event) {
        console.log(event);//可以看到具体是移入还是移出
      });

在这里插入图片描述
然后就可以根据获取的type类型，进行判断

The Straight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQurey引入简单实用导入问题$ 的核心函数jQuery提供的遍历区分DOM和$对象jQuery对象的本质两种对象的使用区别jQuery选择器（重点）基本选择器层级选择器过滤选择器基本内容过滤器内容过滤器属性过滤器表单过滤器表单对象属性jQuery元素的筛选过滤查找串联官方文档HTML属性操作html（）text（）val（）attr（） prop（）引入什么是jQuery ?jQuery，顾名思义，也就是JavaScript和查询（Query)，它就是辅助JavaScript开发的js类库
复制链接

扫一扫