您的位置：首页 > Web前端 > JQuery

jQuery基本用法

2019-08-15 11:17 951 查看

jQuery：

jQuery就是一个工具，它对获取对象和操作对象进行了封装，提供了非常简单的解决方案。

jQuery对象和js原生对象的区别：

jQuery可以使用jQuery封装的各种便利的方法。

$(js原生对象)

jquery对象.get(0)

jquery对象[0]

获取对象：

利用css的选择器获取对象：

基本选择器：

#id

.class

标签名

选择器1, 选择器2,…

后代选择器：

层级选择器：祖先选择器后代选择器

直接后代选择器：父选择器 > 子选择器

兄弟选择器：兄元素选择器 + 弟元素选择器

所有弟弟们选择器：兄元素选择器 ~ 弟元素选择器

过滤选择器：

基本的过滤选择器：

奇偶选择器： :odd :even

比较选择器： gt(索引) lt(索引) eq(索引)

操作对象：

val(): 获取或设置表单元素的value的值

text(): 获取开始标签和结束标签之间的文本内容

html(): 获取开始标签和结束标签之间的html内容

css(): 获取或设置元素的样式属性，只设置一个属性 css(“属性名”， “属性值”) 设置多个属性css({“属性名”: “属性值”, “属性名”: “属性值”})

hide(): 将元素隐藏

show(): 将元素显示

$的应用的场景：

1、在页面加载完成时（所有的标签元素加载完成）执行代码

$(function(){ // jQuery代码 })

和onload事件的区别，页面加载完成时（页面所有的元素都加载完成，包括图片和css还有js），执行的时间点比jQuery的时间点要晚。

onload事件只能绑定一次，jQuery的入口函数可以有很多个

2、将原生的js对象转换为jQuery对象

$(js原生对象)

注意：function () { this } this关键字是一个原生js对象，要使用jQuery的方法，必须将this使用$()包裹转换为jQuery对象。

$(this)

3、使用选择器获取页面上对应的元素的jQuery对象

$(“选择器”)

注意：$(“选择器”)中如果有多个元素对象的话，会有隐式遍历的特性

4、可以把html字符串转换为jQuery对象

$(“html字符串”)

$("<input type=‘text’ name=‘username’, value=‘123’>")

笔记

获取元素：

$(选择器)

children(选择器)

find(选择器)

对元素进行操作：

绑定事件：

click()

mouseover()

mouseout()

对样式的操作：

css()

addClass()

removeClass()

toggleClass()

hasClass()

关于动画的操作：

hide()

show()

$("#dv").css(“backgroundColor”, “red”)

$("#dv").css(“fontFamily”, “宋体”);

链式编程：

就是在函数功能性代码之后，把原调用函数的对象作为返回值继续返回。

function Student(name, age){

this.name = name;

this.age = age;

this.sayHi = function(){

console.log("hi, " + this.name);

return this;

};

this.sayHello = function(){

console.log("hello, " + this.name);

}

var stu = new Student(“zs”, 18);

stu.sayHi().sayHi();

stu.sayHello().sayHi();

$(“ul”).find(“li”)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航