Some operations of jQuery on page labels and properties

  • Add and delete class attribute in jQuery:
//Change value in class = ''
$('#**').removeClass('**');  
$('#**').addClass('**');
$("#**").removeClass('**').addClass('**');

//Change tag attribute value
$('#**').attr("display", "none"); 

//Add property values to labels
$('#**').attr({"Attribute name":"Attribute value"});

//Change the attribute value in style in the label
$('#**').css('Attribute name','Attribute value');
  • Hide and show select first option
$('#**').children('option').first().hide();
$('#**').children('option').eq(1).attr("selected", "selected");


$('#blackBorderAdapt').children('option').first().show();
$('#blackBorderAdapt').children('option').eq(1).attr("selected",false);
  • To delete a node in jQuery:
$("× * *"). remove(); / / delete itself and all its children
 $("× * *"). html(""); / / delete all child nodes
  • Clear the input box in jQuery:
$("#**").val("");
  • Clear the selection box in jQuery:
$("#** option:selected").attr("selected",false);
  • jQuery reset interface label:
$("#**").html("");
var html = [];
html.push("<div>Add content 1</div>");
html.push("<div>Add content 2</div>")
$("#**").append(html.join(""));
  • jQuery getting and setting interface data

Obtain:

var ** = $('#**').html();//Gets the html content of the first matching element.
var ** = $('#**').val();//Get the value of the input box
var ** = $('#** option:selected').text();//Get the data selected in the drop-down box
var ** = $('#**').text();//Get the text content in the DOM element matched by the current jQuery object. The so-called text content is the text content after filtering all HTML tags based on the HTML content of the element (that is, the innerHTML attribute value)

Set up:

$('#**').html("**");
$('#**').val("**");
$("#** option:selected").attr("selected",false);
$('#**').text("**");
Such as:
<div id="divShow"><b><i>Write Less Do More</i></b></div>
    If we use: VAR strhtml = $("divshow"). Html();
    The result is: < b > < I > write less do more < / I ></b>
    If we use: VAR strhtml2 = $("divshow B I"). Html();
    The result: Write Less Do More
    text does not have the first case, if we: VAR strText = $("ාdivshow"). text();
    The result: Write Less Do More
  • Assign a value to the interface label:
document.getElementById('**').innerHTML="Added content";
  • jquery check box:
$('#checkbox-all').click(function(){
    if($(this).prop('checked')){
        $('input[type="checkbox"]').prop('checked',true);
    }
    else{
        $("td :checkbox").prop("checked",false);
    }

    updateSelect();
});
  • Center jquery object:
function center(obj) {
    //obj is the whole object of the pop-up box
    var screenWidth = $(window).width(), screenHeigth = $(window).height();
    //Get screen width and height
    var scollTop = $(document).scrollTop();
    //Distance from the current window to the top of the page
    var objLeft = (screenWidth - obj.width()) / 2;
    ///Distance from flyout to left
    var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
    ///Distance from flyout to top
    obj.css({
        left:objLeft + "px",
        top:objTop + "px"
    });
    obj.fadeIn(500);
    //Flyout fade in
    isOpen = 1;
    //After the pop-up box is opened, the variable is set to 1, indicating that the pop-up box is open for loading
    //When the window size changes
    $(window).resize(function() {
        //Only in the state of is open
        if (isOpen == 1) {
            //Retrieve data
            screenWidth = $(window).width();
            screenHeigth = $(window).height();
            var scollTop = $(document).scrollTop();
            objLeft = (screenWidth - obj.width()) / 2;
            var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
            obj.css({
                left:objLeft + "px",
                top:objTop + "px"
            });
            obj.fadeIn(500);
        }
    });
    //When the scroll bar changes
    $(window).scroll(function() {
        if (isOpen == 1) {
            //Retrieve data
            screenWidth = $(window).width();
            screenHeigth = $(window).height();
            var scollTop = $(document).scrollTop();
            objLeft = (screenWidth - obj.width()) / 2;
            var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
            obj.css({
                left:objLeft + "px",
                top:objTop + "px"
            });
            obj.fadeIn(500);
        }
    });
}
  • jquery input box validation
//udp://10.10.40.135:8888
function isRecordURL(value) {
    if(value.search(/^udp:\/\/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?):([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/) == -1){
        return false;
    }else{
        return true;
    }
}
//Name cannot contain special characters
function isRecordName(value) {
    var pattern = new RegExp("[`~!@#$^&*()=|{}_':;',\\[\\].<>/?~!@#¥......&*()-|{}[]';: ""'. ,,?]");
    var rs = ""; 
    for (var i = 0; i < value.length; i++) { 
        rs = rs+value.substr(i, 1).replace(pattern, ''); 
    }  
    if(rs==value){
        return true;
    }else{
        return false;
    }     
}

Tags: JQuery Attribute less

Posted on Thu, 09 Apr 2020 11:20:05 -0700 by weyes1