我的前端学习9

最新推荐文章于 2024-09-22 11:39:50 发布

符校源

最新推荐文章于 2024-09-22 11:39:50 发布

阅读量290

点赞数 1

文章标签： js javascript css

本文链接：https://blog.csdn.net/Java_Close/article/details/108206569

版权

json：

json是一种特殊的字符串，js中的对象只能够在js自身识别

js对象中的属性名可以加上引号也可以不加

js中有两种类型可以转换为json

js对象 --> json对象使用JSON.stringify（）

js数组 --> json数组使用JSON.stringify（）

json对象 --> js对象使用JSON.parse（）

json数组 --> js数组使用JSON.parse（）

jQuery：就是js框架

在页面中导入jQuery的js文件，就会给浏览器添加一个方法：$

所以jQuery操作都离不开$

如何使用jQuery:需要导入相应的js文件

1.使用script标签导入相应的jQuery文件

2.导入之后就可以进行jQuery操作了

jQuery的核心函数：

$就是核心函数，也可以是jQuery。

核心函数参数类型：

1.参数为匿名函数

作用：当DOM加载完毕后，执行js脚本代码

2.参数为选择器字符串

作用：获取与选择器匹配所以的DOM对象，并封装为jQuery对象

3.参数为DOM元素 / 对象

作用：将DOM对象封装为jQuery对象

4.参数为标签字符串（用的少）

当做对象使用：

$.each():遍历数组

$.trim():去掉字符串两端的空格

jQuery对象

参数1：遍历的数组下标

参数2：遍历元素的DOM对象

jQuery的核心对象：

$(选择器字符串)返回的对象就是核心对象

核心对象中的常用属性和方法

length 或 size() 求属性的长度

[index] 或get(index) 获取对应下标DOM对象

each() 遍历数组

index():返回对应jQuery对象在兄弟元素中的下标

jQuery的基本选择器：

id选择器 $('#box1').html('内容')

元素选择器 $('.box1').html('内容')

类选择器

通配选择器

交集选择器

并集选择器

层级选择器

$(function(){

祖先元素 --> 后代元素 console.log($("ul div").html())

父元素 --> 子元素 console.log($("ul>div").length)

前一个兄弟元素+后一个兄弟元素

console.log($("#id+li").html())

前一个兄弟元素~后面所以的兄弟元素

console.log($("#id~li").length())

})

表单选择器：表单，表单属性

需求:

1. 选择不可用的文本输入框

2. 显示选择爱好的个数

3. 显示选择的城市名称

例子：

$(function(){

console.log($(":input").length)

console.log($(":text").length)

//1. 选择不可用的文本输入框

console.log($(":text:disabled").val("123"))

// 2. 显示选择爱好的个数

console.log($(":checkbox:checked").length)

// 3. 显示选择的城市名称

console.log($(":selected").val())

console.log($("select").val())

/*select下拉框的value值就是选中的value值*/

jQuery过滤选择器：在原有的选择器基础上，在添加一层条件进行筛选

1. 选择第一个div

console.log($("div:first").html())

2. 选择最后一个class为box的元素

console.log($(".box:last").html())

3. 选择所有class属性不为box的div

console.log($("div:not(.box)").html())

4. 选择第二个和第三个li元素

$("li:lt(3):gt(0)").each(function(index,item){

console.log(item.innerHTML)

})

5. 选择内容为BBBBB的li

console.log($("li:contains(BBBBB)").length)

6. 选择隐藏的li

console.log($("li:hidden").html())

7. 选择有title属性的li元素

console.log($("li[title]").length)

8. 选择所有属性title为hello的li元素

console.log($("li[title=hello]").length)

:first--选择第一个元素

:last--选择最后一个元素

:not--排除掉满足条件的元素

:gt--选择在指定下标之后的元素

:lt--选择在指定下标之前的元素

:contains--选择满足指定文本内容的元素

:hidden--选择隐藏的元素

[title]--选择含有指定属性的元素

[title=value]--选择含有指定属性和指定属性值的元素

jQuery属性的操作：

操作一般属性

attr()

removeAttr()

prop()---专门用来操作boolean类型的属性

操作类

addClass()

emoveClass()

操作Html/文本/值

html()

text()

val()

例子：

$(function(){

1. 读取第一个div的title属性

console.log($("div:first").attr("title"))

2. 给所有的div设置name属性(value为hqyj)

$("div").attr("name","hqyj")

3.移除所有div的title属性

$("div").removeAttr("title")

4.给所有的div设置class='hqyjClass'

$("div").attr("class","hqyjClass") 重新替换class的属性值

$("div").addClass("hqyjClass") 在原有的class基础上加上设置的属性值

5.给所有的div添加class='abc'

$("div").addClass("abc")

6. 移除所有div的box的class

$("div").removeClass("box")

7. 得到最后一个li的标签体文本

console.log($("li:last").html())

8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"

$("li:first").html("<h1>mmmmmmmmm</h1>")

9. 得到输入框中的value值

console.log($(":text").val())

10. 将输入框的值设置为hqyj

$(":text").val("hqyj")

11. 点击'全选'按钮实现全选

$("button:first").click(function(){

$(":checkbox").attr("checked",true)

$(":checkbox").prop("checked",true)

})

12. 点击'全不选'按钮实现全不选

$("button:last").click(function(){

$(":checkbox").removeProp("checked")

})

})