JQuery语句

最新推荐文章于 2023-03-03 17:17:25 发布

一蓑烟雨..

最新推荐文章于 2023-03-03 17:17:25 发布

阅读量248

点赞数

分类专栏： javascript笔记文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_44713688/article/details/115366339

版权

javascript笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.简介

jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。他们两个可以混合使用，但是要使用jquery必须导入jquery包。

2.引入

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

3.语句

获取选择器

//js写法
document.getElementById("xx")         // id
document.getElementsByClassName("xx")[0] //classname
document.getElementsByTagName("xx")   //tagname
document.getElementsByName("xx")      // name
--------------------------------------------------------------------------------
//jquery写法
$("#xx");            //id
$(".xx");            //classname
$("xx");             //tagname
$("[name='xx']");    //name

$('div:empty')       // 选择空的div元素
$("div.test");       // div 中class为test的元素
$('.test > div')     // 直系后代选择器
$(".test div")       // 所有后代选择器

操作内容

$a.innerText;    // 元素内部文本           
$a.innerHTML;    // 元素内部内容，可以解析html标签
$a.value;        // 表单元素的取值，赋值是：a.value = "aaaa"
--------------------------------------------------------------------------------
$a.text();      // 元素内部文本 赋值是 $a.text("aaaa")
$a.html();      // 元素内部内容，赋值是：$aj.html("<a>123</a>")
$a.val();       // 表单元素的取值，赋值是：$a.val("aaaa")

操作样式

a.style.backgroundColor = red;    // 设置样式
a.style.color;                    // 获取样式，只能获取内联样式，也就是写在标签里面的样式
--------------------------------------------------------------------------------
aj.css("color", "yellow");         // 设置样式
aj.css("color");                  // 可以获取到内嵌式的样式属性
$('.bb').css({                    // 可以同时设置多个样式
   backgroundColor: 'red',
   width: '200px',
   height: '200px'
})

显示与隐藏

$a.style.display = 'block';
$a.style.display = 'none';
--------------------------------------------------------------------------------
$(a).show();
$(a).hide();

jQuery 中的事件

$(".test").click( function(){
   alert($(this).text());
});

// 绑定事件，可以同时绑定多个
$(".test").bind("click", function() {
   alert($(this).text());
});

// 解除绑定事件
$("#btn").click(function() {
   $(".test").unbind("click");
});

// 事件可以在 其他事件内绑定
$("#add").click(function() {
   $(".test").bind("click",function() {
      alert($(this).text());
   })
});

追加元素

var new = document.createElement('p')
new.innerHTML = 'p标签内部元素'
a.appendChild(new)


第一种方法
a.append('<p>p标签内部元素</p>')


第二种方法
$('<p>ppaaap</p>').appendTo($('#box'))

// 在元素头部插入内容
a.prepend('<span>内容</span>');
$("<b>Hello World!</b>").prependTo(".p");

删除节点

var a = document.getElementsByclassName('class')[0]
a.removeChild(childNode)
--------------------------------------------------------------------------------
// 可以直接移除自身指向的元素
$(".a").remove();

清空节点

$a.innerHTML = ''


a.empty()   // 清空a元素内部所有节点

包裹节点

js 没有此方法

--------------------------------------------------------------------------------

$("p").wrap("<div></div>");    // 将p标签外层都包裹上div元素

$("p").wrapAll("<div class="nnn"></div>")   // 将所有匹配的元素用一个元素包裹起来，位置会发生变换

$('ul li').wrapInner("<a href='#1'></a>");       // 将匹配元素的子内容用其他结构化的标记包裹起来

获取属性

setAttribute
getAttribute
--------------------------------------------------------------------------------
id='we'


$('p').attr('id');                          //获取 p元素的 id 属性；
$('p').attr('id','newId');                  //设置p元素的id属性
$('p').attr({'id': 'hhha', 'class':'cls'})  // 同时给p元素设置多个不同属性

获取焦点、失去焦点

document.getElementById('id').focus()
document.getElementById('id').blur()
--------------------------------------------------------------------------------

$('#input').focus();
$('#input').blur()

其他


a.hasClass('cn1')   //检测a元素的class类中是否包含cn1

indexOf   includes


//复制
let newP = myP.cloneNode(true) //此时的true表示复制了内容，不写就是只复制标签
$('p').clone(true) //此时的true表示是否连着它的事件也复制

一蓑烟雨..

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery语句

1.简介jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。他们两个可以混合使用，但是要使用jquery必须导入jquery包。2.引入<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>3.语句获取选择器//js写法document.getElementById("x
复制链接

扫一扫