juqery的初步了解

最新推荐文章于 2024-08-09 02:16:38 发布

乐意-李

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量667

点赞数 1

文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qq_45903009/article/details/114004804

版权

一：什么是juqery

juqery是一个兼容多浏览器的js函数库，主要分为javascript和查询的，即就是辅助javascript开发的库

1·2：juqery的作用

程序员：简化js以及ajax的编程，将关注点转向功能需求上，从而提高项目的开发速度。
用户角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资
使用页面元素更加简单（模仿css选择器）
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)。

1·3jquery的引入

本地jquery引入

  <script type=“text/javascript” src=“”></script>

cdn引入

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

1·4juqery的初步认识

1·4·1：$(function(){})

在JQuery库中， $是 J Q u e r y 的别名，$ ()等效于就jQuery()，
相当于页面初始化函数，当页面加载完毕，会执行$()，即jQuery()。
是$(document).ready(function(){})的简写

1·4·2： $(document).ready(function(){})和window.onload 的区别

ready表示文档已加载完成（不包含图片等非文字媒体文件）
onload是指页面包含图片在内的所有元素都加载完成
所以前者比后者先执行

1·5：jQuery包装集

在jQuery中，无论是一个还是一组，都会被封装成一个jQuery包装集，即就是集合，所以$()返回的也就是一个集合

1·5·1：jQuery包装集与原生DOM 对象的互转

jQuery包装集转DOM对象(可以通过下标或者打点的方式)

//let oP = $("#test").get(0)
let oP = $("#test")[0];
console.log(oP.innerHTML);

DOM对象转jQuery包装集

let oP = document.getElementById("test");
console.log($(oP).html());

二：jquery选择器

“$”符号在jQuery中代表对jQuery对象的引用，返回jQuery对象

2·1：基础选择器

id选择器

//a.js写法
$("#box1").css("backgroundColor","red");

//b.css写法
$("#box1").css({backgroundColor:"yellow"});

类选择器

$(".box").css({backgroundColor:"red"});

标签选择器
```
$("p").css({backgroundColor:"red"});
```

群组选择器

$("strong,p,span").css({backgroundColor:"red"});

通配符选择器
```
$("*").css({backgroundColor:"red"});
```

2·2：层级选择器

后代选择器

$("body div").css({backgroundColor:"red"});

子代选择器

$("body>div").css({backgroundColor:"skyBlue"});

相邻选择器

$("#box1+div").css({backgroundColor:"skyBlue"});

兄弟选择器

$("#box1~div").css({background:"yellow"});

2·3：属性选择器

div带有class属性的选择器

$("div[class]").css("backgroundColor","red");

div带有id属性的选择器

$("div[id]").css("backgroundColor","green");

指定id为box1

$("div[id='box1']").css("backgroundColor","yellow");

同时存在多个属性

$("div[class][id]").css("backgroundColor","skyblue");

2·4：伪类选择器

偶数行

$("div:even").css("backgroundColor","skyblue");

奇数行

$("div:odd").css("backgroundColor","skyblue");

第一个元素

$("div:first").css("backgroundColor","skyblue");

最后一个元素

$("div:last").css("backgroundColor","skyblue");

除了某个元素

$("div:not('#box2')").css("backgroundColor","skyblue");

$("div").not('#box3').css("backgroundColor","skyblue");

第n个元素

$("div:eq(1)").css("backgroundColor","skyblue");

$("div").eq(1).css("backgroundColor","skyblue");

大于n的元素

$("div:gt(1)").css("backgroundColor","skyblue");

小于n的元素

$("div:lt(3)").css("backgroundColor","skyblue");

2.4:内容选择器

字符串中包含的元素

$("div:contains('hello world')").css({background:"red"});

内容为空的
```
$("div:empty").html("666");
```

根据子元素进行筛选

$("div:has('#s')").css("background","red");

2·5：可见性选择器

改变不可见元素的样式

$("tr:hidden").css("background","green");

改变可见元素的样式

$("tr:visible").css("background","red");

三：jquery的遍历

用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素

下一个元素：next

$("#box2").next().css({background:"red"});

下面所有元素：nextAll

$("#box2").nextAll().css({background:"red"});

上一个元素：prev

$("#box2").nextAll().css({background:"red"});

上一个所有的元素：prevAll

 $("#box2").prevAll().css({background:"red"});

找父元素：parent

$("p").eq(3).parent().css({background:"yellow"});

找子元素

必须传参数的：find

$("body").find("div").css({background:"yellow"});

可以不用传参数的：children

//children 不传参时默认传递通配符
$("body").children("div").css({background:"yellow"});

四：jquery的文本和事件

4·1：文本的读写： val

value == val();

读：
```
 console.log($("input").val());
```
写：
```
$("input").val(888);
```

4·2：元素内容的读写：html

innerHTML == html();

读：
```
console.log($("p").html());
```
写：
```
$("div").html(456);
```

jQuery特点:关于读写的函数,通常都是一个,无参为读,有参为写.

五：jquery的事件

jQuery的事件全都去除on

注意this的写法：

jQuery(document).ready(function(){
        $("div").click(function(){
            //注意:$(this)的写法
            $(this).css({background:"red"});
        });
        
        $("div").mouseover(function(){
            //注意:$(this)的写法
            $(this).css({background:"yellow"});
        });
    });

jQuery的事件可以传自定义参数:

$(function(){
   $("div").click({name:"老王",pwd:123456},function(evt){
   console.log(evt.data);
    });
});

red"});
});

      $("div").mouseover(function(){
          //注意:$(this)的写法
          $(this).css({background:"yellow"});
      });
  });




- jQuery的事件可以传自定义参数:

  ```js
$(function(){
     $("div").click({name:"老王",pwd:123456},function(evt){
     console.log(evt.data);
      });
 });