JQuery

最新推荐文章于 2024-09-14 18:52:56 发布

阿里巴巴待招录工程师

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量44

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/PHaoLin/article/details/129820654

版权

本文介绍了JQuery的核心特性，包括其强大的选择器系统，如ID、元素和类选择器，以及DOM操作如属性设置、样式修改和内容管理。此外，还讲解了事件处理，如click和focus，以及Ajax请求的使用，如$.ajax、$.get和$.post方法。

摘要由CSDN通过智能技术生成

JQuery

优点 :
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识…

1、Jquery对象

$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。

通过该对象可以获取jQuery对象，调用jQuery提供的方法等。

只有jQuery对象才能调用jQuery提供的方法。

 $ <==> jQuery

Jquery的使用

在页面引入即可：

Dom对象与Jquery包装集对象

Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：
var div = document.getElementById(“testDiv”);
var divs = document.getElementsByTagName(“div”);
Jquery包装集对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：
var jQueryObject = $(“#testDiv”);
Dom对象转 Jquery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById(‘mydiv’);
// 获取Dom对象
mydiv = $(domDiv);
Jquery对象转 Dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可 :
// 第一种方式获取jQuery对象
var jqueryDiv = jQuery(‘#mydiv’);
// 第二种方式获取jQuery对象
jqueryDiv = $(‘#mydiv’);
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象 :
$(‘#mydiv’).each(function() {//遍历
var jquery = $(this);
});

原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；
而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供而的方法。

2、Jquery选择器

jQuery中提供的简便的方式，供我们查找|定位元素。

基础选择器

id选择器 #id
- $(“#testDiv”)选择id为testDiv的元素
元素名称选择器 element
- $(“div”)选择所有div元素
类选择器 .class
- $(“.blue”)选择所有class=blue的元素
选择所有元素 *
- $(“*”)选择页面所有元素
组合选择器 selector1,selector2,selectorN
- $(“#testDiv,span,.blue”)同时选中多个选择器匹配的元素

层次选择器

在这里插入图片描述

表单选择器

在这里插入图片描述

3、Jquery Dom操作

提供对HTML节点的操作，优化原生js；
注意：以下的操作方式只适用于jQuery对象。

操作元素的属性

属性操作

 
 1.attr() 
 设置或者返回元素的属性 ; 
 2.prop() 
 设置 具有 true 和 false 两个属性的属性， 
如 checked, selected 或者 disabled。

百度新浪全选

console.log($(‘:checkbox’).attr(‘checked’));
// 获取属性值：prop
// 若未选中显示false，选中显示 true

console.log( $(" : c h ec kb o x ") . p ro p (^{'} c h ec k e d^{'})); co n so l e . l o g ($ (‘#a2’).prop(‘href’))
// 设置属性值

$(‘#a1’).attr(‘href’,‘https://jquery.com’);
$(“:checkbox”).prop(“checked”,false);
// 移除属性
$(‘#a2’).removeAttr(‘href’);

获取属性
aa bb
- attr（属性名称）
  - 获取指定的属性值，操作checkbox 时：
    选中返回 checked，没有选中返回 undefined。
    - attr(‘checked’)
      attr(‘name’)
- prop（属性名称）
  - 获取具有true和false两个属性的属性值
    - prop(‘checked’)
设置属性
- attr(属性名称，属性值)
  - 设置指定的属性值，操作 checkbox时：
    选中返回checked，没有选中返回undefined。
    - attr(‘checked’,’checked’)
      attr(‘name’,’zs’)
- prop(属性名称，属性值)
  - 设置具有true和false的属性值
    - prop(‘checked’,’true’)
移除属性
- removeAttr(属性名)
  - 移除指定的属性
    - removeAttr(‘checked’)

操作元素的样式

attr(“class”)
- 获取class属性的值，即样式名称
attr(“class”,“样式名”)
- 修改class属性的值，修改样式
addClass(“样式名”)
- 添加样式名称
css( )
- 添加具体的样式
removeClass(class)
- 移除样式名称

操作元素的内容

html( )
- 获取元素的html内容
html(“html,内容”)
- 设定元素的html内容
text( )
- 获取元素的文本内容，不包含html
text(“text,内容”)
- 设置元素的文本内容，不包含html
val( )
- 获取元素value值
val(‘值’)
- 设定元素的value值

创建元素

在jQuery中创建元素很简单，直接使用核心函数即可$

$(‘元素内容’);
$(‘
this is a paragraph!!!
’);

添加元素

prepend(content)
- 在被选元素内部的开头插入元素或内容，被追加的 content参数，可是字符、HTML 元素标记。
$(content).prependTo(selector)
- 把content元素或内容加入selector元素开头
append(content)
- 在被选元素内部的结尾插入元素或内容，被追加的 content参数，可是字符、HTML 元素标记。
$(content).appendTo(selector)
- 把 content元素或内容插入selector 元素内，默认是在尾部。
before()
- 在元素前插入指定的元素或内容:
  $(selector).before(content)
after()
- 在元素前插入指定的元素或内容:
  $(selector).after(content)

删除元素

remove( )
- 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty( )
- 清空所选元素的内容

遍历元素

each( )
- $(selector).each(function(index,element)) :遍历元素
- 参数 function 为遍历时的回调函数，
  index 为遍历元素的序列号，从 0 开始。
  element是当前的元素，此时是dom元素。

4、Jquery事件

ready加载事件

ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行

bind绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData],
handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
简单的bind( )事件

bind()方法绑多个事件

点击查看名言

5、Jquery Ajax

$.ajax()

格式：$.ajax({})；
参数：缩

type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
get请求:
$.ajax({
type:“get”,
url:“js/cuisine_area.json”,
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$(‘div’).append(“
”);
for(var i=0; i<msg.prices.length;i++){
$(‘ul’).append(“
”);

$(‘li’).eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$(‘div’).html(errMsg.responseText);
}
});
post请求：
$.ajax({
type:“post”,
data:“name=tom”,
url:“js/cuisine_area.json”,
contentType: “application/x-www-form
urlencoded”,
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$(‘div’).append(“
”);
for(var i=0; i<msg.prices.length;i++){
$(‘ul’).append(“
”);
$(‘li’).eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$(‘div’).html(errMsg.responseText)
}
});