分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jquery基础

发布时间:2023-09-06 02:12责任编辑:赖小花关键词:暂无标签

一、选择器

$("#id") ??????????????id选择器$(".class") ???????????class选择器$("a") ->所有a标签 ?????标签选择器$("#id,.class,a") ?????多重选择$("#id a") ->id下层的a标签,全部递归 ??层级选择$("#id>a") ->id下层的a标签,只找子级 ??层级选择$(":[input_type]") ?????input选择器 $("[custom_attribute]") ??????自定义属性选择$("[custom_attribute=‘value‘]") ???自定义属性选择$("#id").find(input[attribute = "value"]) ->id下层的属性为value的input标签

二、筛选

$(a:first) ?找到第一个a标签$(a:last) ??找到最后一个a标签$(a:eq(索引值)) 找到第一个a标签,索引值从0开始$(a:gt(索引值)) 大于索引值$(a:lt(索引值)) 小于索引值$(:header) ???$找到h标签$(this).next() ??下一个$(this).prev() ??上一个$(this).parent() 父级$(this).children() ??子级$(this).sibling() 兄弟标签

三、样式操作

addClassremoveClasstoggleClass

四、属性操作

attr("a") 查看属性attr("a","v") 增加属性removeAttr("a")prop("checked") 效果同attr,用于checkbox、radioprop("checked",true)

五、示例

示例一

 1 ????<script src="jquery.js"></script> 2 ????<script> 3 ????????function check_all() { 4 ????????????$(‘:checkbox‘).prop(‘checked‘,true); ??#查找所有checkbox,使其选中 5 ????????} 6 ????????function cancel_all() { 7 ????????????$(‘:checkbox‘).prop(‘checked‘, false); #查找所有checkbox,使其不被选中 8 ????????} 9 ????????function reverse() {10 ????????????$(‘:checkbox‘).each(function () {11 ????????????????this.checked = this.checked? false:true ??#反转checkbox的checked属性12 ????????????}) ?//1.X版本13 ????????}14 ????????$(".edit").click(function () {15 ????????????var texts = $(".dialog>input")16 ????????????var tds = $(this).parent().prevAll()17 18 ????????????$(texts[0]).val( $(tds[1]).text() )19 ????????????$(texts[1]).val( $(tds[0]).text() )20 21 ????????????$(".dialog").removeClass("hide")22 ????????????$(".mask").removeClass("hide")23 ????????})24 25 ????????$(".cancel").click(function () {26 ????????????$(".dialog").addClass("hide")27 ????????????$(".mask").addClass("hide")28 ????????})29 ????</script>

示例二

1 <script src="jquery.js"></script>2 ????<script>3 ????????$(".header").click(function () {4 ????????????//选中标签的父级的兄弟的class含有‘content’的标签,增加‘hide’样式5 ????????????$(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)6 ????????????$(this).next().removeClass(‘hide‘) ?//移除下一个标签的‘hide’样式7 ????????})8 ????</script>

jquery基础

原文地址:https://www.cnblogs.com/baird/p/9542472.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved