发表于: 2020-01-08 23:23:59

1 1254


今日完成

jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
ex:
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
ex:
遇到问题:
appendText()中的Text的含义
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
ex:
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
ex:
append/prepend和after/before有什么区别?

总结:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
//-------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery - 删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素。
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
ex:
总结:不添加参数remove()删除本身及内部包含的子元素,empty()删除内部所有子元素
-------------------------------------------------------------------------------------------------
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
ex:删除 class="italic" 的所有 <p> 元素:
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素
ex:
ex:可以在 addClass() 方法中规定多个类:
总结:
1.可以一次为多个对象添加同一个属性,绑定对象用引号包裹,对象与对象之间用逗号隔开
2.添加的属性自以为参数在括号内,用引号包裹,不同属性间用分号(;)隔开,可以用回车换行
3.也可以一次性,为一个对象添加多个属性,属性本身用引号包裹,属性之间用空格隔开
-------------------------------------------------------------------------------------------------
jQuery removeClass() 方法
在不同的元素中删除指定的 class 属性:(与添加属性类似)
ex:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
描述:根据绑定对象,初始有无蓝色,来回切换(有的删除,没有添加)
-------------------------------------------------------------------------------
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
ex:
描述:绑定标签有多个,直接写默认输出第一个标签的具体属性的具体值
设置多个 CSS 属性
语法:
css({"propertyname":"value","propertyname":"value",...});
ex:
为所有匹配元素设置 background-color 和 font-size:

遇到问题:一部分例子不理解

收获:jQuery的html和css增删改查

明日计划:继续js2-4


返回列表 返回列表
评论

    分享到