Jquery学习

最新推荐文章于 2024-05-05 23:51:11 发布

qq_38338872

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量53

点赞数

分类专栏：学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_38338872/article/details/123698639

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. DOM对象和Jquery对象

<body>
    <div id="mydiv1" class="divclass1">文本1</div>
    <div id="mydiv2" class="divclass2">文本2</div>    
</body>
<script type="text/javascript" src="jquery-3.6.0.js" charset="utf-8"></script>
<script type="text/javascript">
    //DOM对象
    var divDom=document.getElementById("mydiv1");
    //jquery对象
    var divJquery=$("#mydiv2");//通过id选择器
    //DOM对象->jquery对象
    var divDomToJquery=$(divDom);
    //jquery对象->DOM对象
    var divJqueryToDom=divJquery[0];//通过下表索引
</script>

2. Jquery选择器

2.1 基础选择器

$("#id属性值")      id选择器,id="id属性值"
$("元素名称")       元素选择器
$(".class属性值")   类选择器，class="class属性值"
$("*")              通用选择器
$("#id,.class,div") 组合选择器

var j1=$("#mydiv1");	//id选择器
var j2=$("div");		//元素选择器
var j3=$(".divclass2");	//类选择器
var j4=$("*");			//通用选择器
var j5=$("#mydiv1,.divclass2,div");	//组合选择器

2.2 层次选择器

$("#parent div")    后代选择器  选择id为parent的元素的所有div元素，包括第一代第二代等
$("#parent>div")    子代选择器  选择id为parent的直接div子元素，第一代
$(".class+img")     相邻选择器  选择css类为class的下一个img元素，下一个不是则没找到
$(".class~img")     同辈选择器  选择css类为class的之后的img元素

2.3 表单选择器

$(":input")     会匹配所有的input、textarea、select和button元素
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")

3. DOM操作

操作属性：(如果属性类型为boolean(即checked、selected等)则使用prop，否则使用attr)

获取:

attr(属性名)    
prop(属性名)

//获取id="aa"元素的name属性值
var name=$("#aa").attr("name");
var name=$("#aa").prop("name");

设置：

attr(属性名,属性值)    
prop(属性名,属性值)

//id="aa"元素的name属性值设置为name1
var name=$("#aa").attr("name","name1");
var name=$("#aa").prop("name","name1");

删除：

attr(属性名)

var name=$("#aa").removeAttr("name");//删除id="aa"元素的name属性

4. 元素操作

4.1 操作元素样式

$("#id").addAttr(“class”,“green”)

attr("class")   		获取样式名
atter("class","样式名") 	设置样式
addClass("样式名")  		增加样式
css({'样式名1':'样式值1','样式名2':'样式值2'})  添加具体行内样式
removeClass(class)		删除样式

4.2 操作元素内容

html()              （非表单元素），包含html标签
html("html内容")    （非表单元素）
text()              （非表单元素）不包含html标签
text("text内容")    （非表单元素）
val()               （表单元素）
val("元素value值")   （表单元素）

创建添加元素：

var p="<p>p</p>";$(p)
	prepend(content)    前追加子元素
		指定内容.prepend(内容)
		$(内容).prependTo(指定元素)
	append(content)     后追加子元素
		指定内容.append(内容)
		$(内容).appendTo(指定元素)
	before()      同级之前追加
	after()       同级之后追加

删除元素：

remove()    删除元素标签和内容
empty()     清空元素内容

遍历元素：

$(selector).each(function(index,element))   
/*	function为遍历时的回调函数，
	index为遍历元素序列号，从0开始，
	element为当前元素，此时为dom元素*/

5. Jquery事件

ready加载事件：
预加载事件，页面dom结构加载完成后执行，类似于load事件。

$(document).ready(function(){}) <==>$(function(){})

bind()绑定事件：

$(selector).bind(eventType[,eventData],handler(eventobject)) 
	/*enentType包括focus，load,mousemove等
	  handler(eventObject)表示该事件触发执行的函数
	  
$("元素").bind("事件类型",function(){})
$("元素").事件名(function(){})

6. Jquery Ajax

Jquery Ajax:异步、无刷新技术

调用ajax:
$.ajax({
	type:       请求方式GET/POST
	url:        请求地址
	async:      是否异步，默认true表示异步
	data:       发送到服务器的数据
	dataType:   预期服务器返回的数据类型
	contenType: 设置请求头
	success:    请求成功时调用此函数
	error:      请求失败时调用此函数
})

$.get() 
$.post()
$.getJSON()

$.ajax({
    type:"get",
    url:"data.json",
    data:{
        userName:"zhangsan"
    },
    success:function(data){
        console.log(data);
        //var obj=JSON.parse(data);
        //console.log(obj);
        var ul=$("<ul></ul>")
        for(var i=0;i<data.length;i++){
            var user=data[i];
            var li="<li>"+user.userName+"</li>";
            ul.append(li);
        }
        $("body").append(ul);
    }
    });
    
$.get(
	"data.json",
	{userName:"zhangsan"},
	function(data){
        console.log(data);
        var ul=$("<ul></ul>")
        for(var i=0;i<data.length;i++){
            var user=data[i];
            var li="<li>"+user.userName+"</li>";
            ul.append(li);
        }
        $("body").append(ul);
})

$.post(
	"data.json",
	{userName:"zhangsan"},
	function(data){
        console.log(data);
        var ul=$("<ul></ul>")
        for(var i=0;i<data.length;i++){
            var user=data[i];
            var li="<li>"+user.userName+"</li>";
            ul.append(li);
        }
	$("body").append(ul);
})

$.getJSON(
	"data.json",
	{userName:"zhangsan"},
	function(data){
		console.log(data);
        var ul=$("<ul></ul>")
        for(var i=0;i<data.length;i++){
            var user=data[i];
            var li="<li>"+user.userName+"</li>";
            ul.append(li);
        }
        $("body").append(ul);
})

qq_38338872

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id="mydiv1" class="divclass1">文本1</div> <div id="mydiv2" class="divclass2">文本2</di
复制链接

扫一扫