jQuery

jQuery

写的少做的多

例子

$() ：调用一个行数
Document.read() ：当文件都加载完成后
Function(){} 执行函数

$(document).ready(function () {
    alert("helllo,jQuery")
});

dom对象和jQuery对象

dom对象
使用js代码获取，创建的对象。Html中的对象都是dom对象
jQuery
使用jQuery代码获取的对象

为什么要使用dom对象和jQuery对象

目的是要使用dom对象的内容，和jQuery对象的内容
同时也需要dom对象的函数，和jQuery对象的函数

两个对象的互相转换

$(document) 是将dom对象转为jQuery对象 可以调用jQuery中的函数

var  $jQobj =  document.getElementById("reset");
$jQobj.onclick=function () {
    alert("你好jQeryobj")
}

jQuery转dom对象
jQuery是个数组，可以通过下标的方式获取dom对象
或者使用get函数

window.onclick =function () {
    var domobj = $("#reset")[0];
    domobj.onclick=function () {
        alert("你好dom")
    }
};

选择器

什么是选择器
用来定位标签的方法
基本选择器
Id选择器
类选择器
标签选择器

通过基本选择器修改css样式

var $one =$("#one").get(0)
	$one.onclick=function(){
		alert("hello")
		$("body").css("background","red")
	}
	var $tow =$(".two").get(0)
	$tow.onclick=function(){
		alert("jks")
		$("body").css("background","blue")
	}

这里关于jQuery对象是数组记一下当修改css样式的时候默认数组全变所以不需要定位是数组哪个数

function f(){
	var $tw = $(".two")
	$tw.css("background","purple")
}

当启用button点击事件的时候，需要确定被点击的对象在数组中哪个位置中

var $one =$("#one").get(0)
	$one.onclick=function(){
		alert("hello")
		$("body").css("background","red")
	}

所有选择器

function a(){
	$("*").css("background","yellow")
}

组合选择器

function c(){
	alert("被调用了")
	 var $s= $("#one,.two")

	 $s.css("background","red")
}

表单选择器$(":type")

$(":button")

过滤器

基本过滤器

$(“<div>:first”)
$(“.class:first”)
$(“*:last”)
$(“#id:qu(1)”)等于
$(“:id:lt(2)”)小于
$(“:js:dt(3)”)大于

单选过滤器
复选过滤器

<form>
        姓名:<input type="text" id="name" value="name" class="inpu">
        性别:<br>
        男:<input type="checkbox" value="男">
        女:<input type="checkbox" value="女">
        <select id="hobby">
            <option value="java">java</option>
            <option value="python">python</option>
            <option value="dos">dos</option>
        </select>
        <input type="button" value="提交">
    </form>

window.onclick =function () {
    $(":button").click(function () {
        alert("进入方法");
        alert($(":checkbox:checked").val());
        alert($("#hobby>option:selected").val())
    });
};

表单过滤器（结合表单选择器使用）
checked:获取checkbox中被选择的内容
$(“选择器:checked”)
disable:获取不可用的文本框(不能更改的)
$(“选择器:disable”)
enable:获取可用的文本框(不能更改的)
$(“选择器:enable”)
selected:获取选中下拉别表框
$(“选择器>option:selected”)

jQuery中的方法

1. val()
读取value值
改变value值
2. text()
读取文本内容连成字符串
改变文本内容
3. attr()
操作文本value以外的数据

function f1() {
    alert($("#acc").val());
    $("#acc").val("请输入账号")
}
function f2() {
    alert($("div").text());
    $("div").text("你好text")
}
function f3() {
    alert($("div").attr("style"));
    $("div").attr("style","background-image: url(img/wallhaven-xlx5mv.jpg) ;width: 800px; height: 400px")
}

remove
删除选择的dom对象和他的子对象

Empty
删除dom对象的子对象
Append（循环使用）
给dom对象在他的后面追加新的dom对象,意思就是创建子类dom标签
Html
Html() :获取dom数组中第一个dom对象的文本值
Html(参数):给dom数组中所有成员设置新内容

function f1() {
    $("form").remove()
}
function f2() {
    $("select").empty()
}
function f3() {
    alert($("option").html());
    $("option:first").html("我爱学习");
}
function f4() {
    alert($("div").text());
    $("div").append();
    $("div").append("<div>我是新的</div>");
}

jQuery循环(each)
方法一
$.each(要循环的内容,function(index,element){理函数})
要循环的内容，可以是数组，json对象，dom对象数组
方法二
$(“选择器”).function(index,element){处理函数} 只能处理dom数组

function f5() {
    const arr = [1,2,3,4];
    $.each(arr,function (i,n) {
        console.log("循环变量"+i,"数组成员"+n)
    })
}