jQuery和jQueryAjax

最新推荐文章于 2025-04-07 13:20:53 发布

hfh-001

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量220

点赞数

分类专栏： javascript 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44934751/article/details/102466787

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍jQuery框架的基础概念，包括其简化JavaScript操作的优势、基本语法、事件处理、DOM操作及AJAX应用。通过实例演示如何使用jQuery进行网页元素的选择、操作及事件响应，适合初学者快速掌握jQuery并应用于实际项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：什么是jQuery

jQuery是一个简化js的代码框架，用简单的语法代替复杂的js核心操作（DOM、文本、css属性、html）

2:作用

1：实用简洁的语法代替复杂的js语法
2：很多前段框架使用了jQuery
www.jq22.com

3:jQuery入门

1：导入jQuery 的js文件
2：原生对象：没有jQuery的对象的所有js 对象都是原生对象

/
var ip1 = document.getElementById(“ip1”);
alert(ip1.value);
//jQuery获取
var $ip = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ip2"); aler\dots$ ip.val());
//把原生对象转化为jq对象
var $ipp = $(i p 1); a l e r t ($ ipp.val());/
//当页面加载完毕后获取值
/window.onload = function (ev) {
alert( $KaTeX parse error: Expected 'EOF', got '}' at position 21: \dots").val()); }̲; //$ () 相当于window.onload
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots alert($ (".ip").val()+"$()");
});/
///点击事件
$(function () {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ip").click(func\dots$ (this).val()+“jq”);
});
});
//给div谢一句话
$("#ip").click(function () {
$("#dd").html(“梦且放在沙滩”)
})
//添加内容
$("#ip").click(function () {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").text("hhhh\dots$ ("#ip").click(function () {//选中按钮，再选中div 对div做操作
/! $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").hide();*!/\dots$ ("#dd").show();!///显示
/! $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").toggle();*\dots$ ("#dd").fadeIn(3000,function () {
alert(“红色”)
});!/
//淡出
/! $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").fadeOut(20\dots$ ("#dd").fadeToggle(2000,function () {
alert(“dddd”);
})!/
})/
//事件冒泡和事件捕获

//外div
/*
点击子触发子然后引发父标签
点击父触发父不会引发子
*/
var p = document.getElementById(“p”);
var c = document.getElementById(“c”);
//监听
p.addEventListener(“click”,function (ev) {
alert(“父ppppp”);
});
c.addEventListener(“click”,function (ev) {
alert(“子cccc”);
})

4：命名规则

为了在代码中更好的区分原生对象和jq对象，我们定义了一个约定每一个jq对象前面加一个
$符号，原生对象前面不能添加$

5:原生对象和jq对象的相互转换

原生----》jq
var $命名 = $(愿生)；
jq----->原生
var 命名 = $jq对象.get(0);

6：onload写法

js:window.load = function(){}//一个页面只能执行最后一个
jq：$(function(){})//每个够可以执行

7：事件

jq对象.事件（function(){
    事件代码块
}） //事件名和js的事件一样  只是把js事件的on去掉就行

8:效果

...了解就可以

9：选择器

  jq选择器参考了css的选择器
  语法：$("选择器名")；
  分类：
      1：基本选择器
      2：层次选择器
      3：位置选择器
      4：属性关系选择器

10：对css和HTML的操作

  HTML属性
    获取：
    var 属性名 = 原始对象名.属性名
    原始属性对象.getAttribute("属性名","属性值")；
  
  jq操作
    prop()
    获取
    var value = $(选择).prop(属性名)
    设置：
    $(选择器).prop("属性名","属性值")；
    移除：
    removeProp("名")；
    添加：addClass();
    removeClass(名);
  css属性：
    <p style = "width = 200px"></p>
    //获取
    jq对象.css("width");
    //设置
    jq对象.css("属性名",'属性值')；

11：jquery修改元素的文本内容

获取文本内容:
var 获取 = $jQuery对象.text();
.html();
设置文本内容:
$jquery对象.text(“新的文本内容”);
.html()；

12.jquery的元素标签的添加-删除-替换

 添加标签
     内部添加！
       父标签 . append (“《标签》” / $(选择器))  向父标签的内部的后面追加一个子标签！
          例如: div.append(p) 
              <div>xxx <p>
       父标签.preppend (“《标签》” / $(选择器))  向父标签的内部的前面追加一个子标签！
          例如:
               div.preppend("p");
               <div><p>xxxxx
    外部追加:
   兄弟标签.after(兄弟标签);  标签后的后面追加一个标签!
   兄弟标签.before(兄弟标签); 标签后的前面追加一个标签!
      HTML 代码:
<p>I would like to say: </p>jQuery 代码:
$("p").after("<b>Hello</b>");结果:
<p>I would like to say: </p><b>Hello</b>

13.jquery里面的遍历操作

for(index in [] / property in object / var i = 1 ; i<10 ; i++)
$.each(数组,function(){
});
$.each(arrs,function(index,item){
//index 每次遍历的下角标
//item 每次遍历的数组内容
});

14.jquery的ajax使用以及异步上传文件! ******

 原生的ajax  4步!
 	1：创建 xmlhttpRequest 对象
 		var ajax = new XMLHttpRequest();
 	2：请求参数
 		ajax.open("get","url",true);
 	3：回调函数
 		ajax.onreadystate = function(){
 			//获取内容
 			var result =  ....
 		}
 	4：发送请求
 		ajax.send();
 Ajax方式：
 $.get();
 $.post();
 $.getJson();
 $.load();
 --------------------------
 $.ajax({settings 特殊的可以和value设置请求的相关参数});
 例如: 我想向百度发起一个get请求 传递 name=二狗子 和 age 等于11
 $.ajax({
    url:"http://www.baidu.com",
    type:"get",
    data:"name=二狗子&age=11",
    success:function(data,status){
      //请求成功的时候
    },
    error:function(execption){
     //请求报错的时候!
    }
 });
 情况1:  上传普通的数据!
 $.ajax({
    url:"http://www.baidu.com",
    type:"get",
    data:"name=二狗子&age=11",
    success:function(data,status){
      //请求成功的时候
    },
    error:function(execption){
     //请求报错的时候!
    }
 });
 情况2:异步上传一个form
  $.ajax({
    url:"http://www.baidu.com",
    type:"get",
    data:#(form表单)..serialize(),
    success:function(data,status){
      //请求成功的时候
    },
    error:function(execption){
     //请求报错的时候!
    }
 });
 .serialize() 将form表单的数据! 改变可以提交的参数形式
    name=value&name=value
情况3:
  异步上传文件!
  不同点:
    1.借助FormData
    2.额外添加两个属性,把请求变成多部件上传!  contentType:false / processData:false
   var fd = new FormData();
   fd.append(key,value);
   fd.append(key,文件  原生input对象.files[0]);
   $.ajax({
    url:"http://www.baidu.com",
    type:"get",
    data: formdata对象,
    contentType:false,
    processData:falase,
    success:function(data,status){
      //请求成功的时候
    },
    error:function(execption){
     //请求报错的时候!
    }
 });