JavaScript从放弃到入门（七）| JS之jQuery与事件

目录

1 获取标签

2 修改和操作标签

2.1 修改和获取文本值text()

2.2 新建和修改标签

2.3 css的修改

2.4 class的修改

2.5 显示和隐藏DOM

2.6 获取DOM信息

3 操作表单

3.1 值的获取和设置

3.2 标签的更改

事件

---

jQuery是一个第三方包，它对js的原生代码进行了简单的封装，我们可以通过使用这个第三方包更加方便的实现更加简单的使用js，同时解决不同浏览器上的差异问题。

1 获取标签

使用jQuery需要手动的导入包。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

传统方式

var a = document.getElementById("p1")
var b = document.getElementByClassName("p1")
var c = document.getElementByTagClass("p");

jQuery方式

var a = $("#p1");
var b = $(".p1");
var c = $("p");

这样的话，获取标签的方式就简化了，不管什么类型的标签都可以通过这种方式获取。

同时，jQuery还整合了层次选择器，结构伪类选择器和属性选择器，可以很方便的对元素进行查找。

var test = $("p:nth-child(2)");
var test = $("p>ul");
var test = $("body>p:nth-child(1)")
var test = $("body>p:nth-of-type(1)")
var test = $("p[id]")

2 修改和操作标签

获取到标签之后，我们就可以对标签进行操作。

2.1 修改和获取文本值text()

jQuery对象的文本值是通过text()来获取的。

• 通过下标，还可以使用原本的方法。

var test = $("p[id]")
test.text();
$("#p1").text()；
test[0].innerHTML;   

修改文本的值只需要加入参数即可。

test[0].innerHTML="hello"；
$("#p1").text("hello jQuery");

2.2 新建和修改标签

在原生代码中，我们创建一个标签的方式是这样的

var px = document.createElement("p");
    px.id="px";
    px.style.background="yellow";
    px.innerHTML="px";
    var list = document.getElementById("p1");
    list.appendChild(px);
//或者这样暴力插入
document.getElementById("p1").innerHTML("<span style="color: red">JavaScript</span>")

而现在，我们这样这样创建

$("#pxx").append('<span style="color: red">JavaScriptlater</span>');    //对应appendChild()

$("#px").prepend('<span style="color: red">JavaScriptbefore</span>');   //对应insertBefore()

同级标签新建

$("#pxx").before('<span style="color: red">JavaScriptbefore</span>');   //对应insertBefore()

$("#pxx").after('<span style="color: red">JavaScriptafter</span>');     //对应insertBefore()

使用html()方法改变标签

$("#pxx").html('<span style="color: red">JavaScript</span>');       //对应innerHTML

 

2.3 css的修改

$("#p1").css("color","red")
$("#p1").css("background","yellow")
/* 串起来的方式 */
$("#p1").css("color","red").css("background","black");

2.4 class的修改

$("#px").addClass("myclass");   //添加myClass类
$("#px").removeClass();         //删除class，也可指定class
$("#px").hasClass("myClass");   //是否含有指定class,返回布尔型变量

2.5 显示和隐藏DOM

$("#px").hide() //隐藏此标签
$("#px").show() //显示此标签

2.6 获取DOM信息

//浏览器可视化窗口
$(window).height()
$(window).width()
//html文档窗口
$(document).height()
$(document).width()
//标签的属性
$("#px").width()        //获取值
$("#px").width(10)      //设置值
$("#px").height(100)    //设置值

2.6.1 更改标签属性attr()和removeAttr()

$("#px").attr("id")         //"px" 获取id的值
$("#px").attr("id","pxx")   //修改id的值为 pxx
$("#pxx").removeAttr("class", "myclass");   //删除标签

3 操作表单

• 对于表单元素，jQuery对象统一提供 val() 方法获取和设置对应的 value 属性

• 非表单元素无法使用，就和非表单无法使用value属性一样。

<div>
    <form>
        <div id="input">
            用户：<input type="text" id="user">
            密码：<input type="password">
        </div>
        <div>
            <button onsubmit="submit()" value="提交"></button>
        </div>
    </form>
</div>

3.1 值的获取和设置

$("div input:nth-of-type(1)").val()；        //获取值
$("div input:nth-of-type(2)").val("hello")  //设置值

3.2 标签的更改

新增

$("#pxx").append('<span style="color: red">JavaScriptlater</span>');
$("#pxx").prepend('<span style="color: red">JavaScriptlater</span>');
$("#pxx").after('<span style="color: red">JavaScriptlater</span>');
$("#pxx").before('<span style="color: red">JavaScriptlater</span>');
$("#pxx").html('<span style="color: red">JavaScriptlater</span>');

删除

$("#pxx").remove()

事件

• 点击事件onclick()->click()

• 初始化事件onload->ready()

• 双击事件ondbclick()->dbclick()

• 鼠标移进和移除事件onmouseover()和onmouseout()

  ->mouseenter和mouseleave()

• hover：鼠标进入和退出时触发两个函数

• keydown：键盘按下时触发；

• keyup：键盘松开时触发；

• keypress：按一次键后触发。

• focus：当DOM获得焦点时触发；

• blur：当DOM失去焦点时触发；

• change：当 、 或 的内容改变时触发；

• submit：当提交时触发；。

$(document).ready(function () {
        $("#button").click(function () {
            window.alert("hello");
        })
    })

简化

$(function () {
        $("#button").click(function () {
            window.alert("hello");
        })
    })