前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQery基础操作

jQery基础操作

作者头像
xiaozhangStu
发布2023-05-04 19:14:32
3070
发布2023-05-04 19:14:32
举报
文章被收录于专栏:xiaozhangStuxiaozhangStu

jqery基础操作

样式操作

设置/获取样式
语法
代码语言:javascript
复制
css(name,value) ;
或
css({name:value, name:value,name:value…}) ;
设置属性
css(name)
举例
代码语言:javascript
复制
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
$(this).css("border");
追加样式
语法
代码语言:javascript
复制
$(selector).addClass(class);
或   $(selector).addClass(class1 class2 … classN);
举例
代码语言:javascript
复制
$("p").addClass("content border");
移除样式
语法
代码语言:javascript
复制
$(selector).removeClass("class") ;
或   $(selector).removeClass("class1 class2 … classN ") ;
​
举例
代码语言:javascript
复制
   $("p").removeClass("text content");
​
切换样式
语法
代码语言:javascript
复制
$(selector).toggleClass(class) ;
举例
代码语言:javascript
复制
$("p").toggleClass("content  border");
判断样式
语法
代码语言:javascript
复制
$(selector). hasClass(class);
举例
代码语言:javascript
复制
$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
    $("p").addClass("content ");
    }
});

内容及Value值操作

html()
举例
代码语言:javascript
复制
$("div.left").html();//获取
//或
 $("div.left").html("<div class='content'>…</div>")//设置
text()

举例

代码语言:javascript
复制
$("div.left").text();//获取
//或
 $("div.left").text("<div class='content'>…</div>");//设置
​
val()
举例
代码语言:javascript
复制
$(this).val();//获取
//或 
$(this).val(value);//设置

节点及节点属性操作

创建节点
语法
代码语言:javascript
复制
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
举例
代码语言:javascript
复制
var $newNode=$("<li></li>");
 var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");
​
插入节点
语法
代码语言:javascript
复制
append(content)     //$(A).append(B)表示将B追加到A中
appendTo(content)   //$(A).appendTo(B)表示把A追加到B中
prepend(content)    //$(A). prepend (B)表示将B前置插入到A中
prependTo(content)  //$(A). prependTo (B)表示将A前置插入到B中
after(content)
insertAfter(content)
before(content)
insertBefore(content)
举例
代码语言:javascript
复制
$("ul").append($("#dd"));
$("#dd").appendTo("ul");
$("ul"). prepend ($("#dd"));
$("#dd").prependTo ("ul");
$("ul").after($("#dd"));
$("#dd").insertAfter("ul");
$("ul").before($("#dd"));
$("#dd").insertBefore("ul");
删除节点

remove():删除整个节点 empty():清空节点内容 detach():删除整个节点,保留元素的绑定事件、附加的数据

举例
代码语言:javascript
复制
$("#dd").remove();
$("#dd").empty();
$("#dd").detach();
替换节点

replaceWith()

replaceAll()

举例
代码语言:javascript
复制
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");

replaceWith() 与replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失

复制节点
语法
代码语言:javascript
复制
$(selector).clone([includeEvents]) ;
​
举例
代码语言:javascript
复制
$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })
​

参数ture或flase, true复制事件处理,flase时反之

节点遍历
语法
代码语言:javascript
复制
$(selector).children();//遍历子元素
$(selector).next();//遍历同辈之后的
$(selector).prev();//遍历同辈之前的
$(selector).siblings();//遍历同辈前后的
$(selector).parent();//遍历父级
$(selector).parents();//遍历父级和以上的
$(selector).each( );//遍历每一个
举例
代码语言:javascript
复制
.....
属性操作
语法
代码语言:javascript
复制
$(selector).attr([name]) ;//获取
//或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置
$(selector).removeAttr(name) ;//删除
举例
代码语言:javascript
复制
$(".contain img").attr({width:"200",height:"80"})
$(".contain img").removeAttr("alt");
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-02-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jqery基础操作
    • 样式操作
      • 内容及Value值操作
        • 节点及节点属性操作
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档