JQuery

jQuery是一个简洁的JavaScript函数库。开发快速的效率高。(说白了就是对DOM的操作Document Object Model文档对象模型)

宗旨是 ;写得少做的多。

优点为什么要用:

1.强大的选择器

2.出色的DOM操作封装

3.可靠的事件处理机制

4.出色的浏览器兼容性

语法实例

1.隐藏 hide()函数,隐藏id=“test”的元素

$(”#test”).hide();

2.删除remove()函数,移除标签名为p的元素

$(“p”).remove()

3.显示 show()函数,显示class=“test”的元素

$(“.test”).show()

4.初始化 文档就绪函数

$(document).ready(function () {});

$(function () {});****

jQuery元素选择器

jQuery使用的选择器完全沿用CSS的选择器

1.id选择器;$(“#test”)选取id=“test”的元素

2.类选择器;$(“.test”)选取class=“test”的元素

3.标签选择器;$(“input”)选取

元素

4.标签id选择器$(“input#test”)选取

的元素

5.标签类选择器$(“input.test”)选取

的元素

jQuery事件函数

就是在用户做一些操作的时候调用某个方法

如:点击登陆按钮,向后台提交数据

点击注册按钮,向后台提交数据

非事件委派

直接给元素添加一个事件

$(“#test”).click(function () {});

$(“#test”).on(“click”,function () {});

事件委派

不直接给元素添加一个事件,而是给该元素的父级元素添加事件

$(“bady”).on(“click”,”input#test”,function (e) {

e.stopPropagation();

});

注:做事件委派的时候一定要阻止事件冒泡

jQuery中非常重要的部分,就是操作DOM (Document Object Model文档对象模型)来对html body里面的元素进行增删改查

对元素的操作有三个简单实用的jQuery方法:

text()设置或返回所选元素的文本内容

$(“span”).text();

html()设置或返回所选元素的内容

$(“div”).html();

val()设置或返回表单字段的值

对属性的DOM操作有

jQuery的attr()方法用于获取元素的属性

实例

$(“#test”).attr(“href”);

获取id=“test”元素的href的值

$(“input”).val();

jQuery对象和js对象

1.使用$选择的元素就是jQuery对象

$(“#test”);

jQuery对象转换成js对象

$(“#test”)[0];

2.使用getElementById()获取的就是js对象

document.getElementById(“test”);

Js对象转换成jQuery对象

$(document.getElementById(“test”))

你可能感兴趣的:(JQuery)